特性

• 水平、垂直和内联菜单模式。
• 受控和非受控选择、打开键和活动键状态。
• items 配置 API 具有旧子支持。
• 子菜单、项目组、分隔线、图标、溢出、弹层渲染和键盘焦点助手。
• 提供 TypeScript 类型定义和语义化 classNames / styles 插槽。
• 被 Ant Design 用作共享的 menu 基础能力。

安装

npm install @rc-component/menu

使用

import Menu, { type MenuProps } from '@rc-component/menu';

const items: MenuProps['items'] = [
  { key: 'home', label: 'Home' },
  {
    key: 'docs',
    label: 'Docs',
    children: [
      { key: 'quick-start', label: 'Quick start' },
      { key: 'api', label: 'API' },
    ],
  },
];

export default () => (
  <Menu mode="inline" items={items} defaultSelectedKeys={['home']} defaultOpenKeys={['docs']} />
);

import Menu, { MenuItem, SubMenu } from '@rc-component/menu';

export default () => (
  <Menu>
    <MenuItem key="1">Item 1</MenuItem>
    <SubMenu key="2" title="More">
      <MenuItem key="2-1">Item 2-1</MenuItem>
    </SubMenu>
  </Menu>
);

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Menu

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | activeKey | string | - | 受控活动项目键。 | | builtinPlacements | Record<string, any> | - | 子菜单的弹层对齐位置。 | | className | string | - | 根菜单的 className。 | | classNames | Partial<Record<'list' \| 'listTitle', string>> | - | 菜单槽的语义 className。 | | defaultActiveFirst | boolean | false | 当活动键不存在时，聚焦第一个启用的项目。 | | defaultOpenKeys | string[] | [] | 初始打开子菜单键。 | | defaultSelectedKeys | string[] | [] | 初始选定项目键。 | | defaultMotions | Partial<Record<MenuMode \| 'other', CSSMotionProps>> | - | 通过菜单模式进行运动配置。 | | direction | 'ltr' \| 'rtl' | - | 布局方向。 | | disabled | boolean | false | 禁用所有菜单交互。 | | disabledOverflow | boolean | false | 禁用溢出测量。 | | expandIcon | ReactNode \| (props: RenderIconInfo) => ReactNode | - | 自定义子菜单展开图标。 | | forceSubMenuRender | boolean | false | 在打开弹层子菜单之前渲染它们。 | | getPopupContainer | (node: HTMLElement) => HTMLElement | - | 弹层子菜单的容器。 | | inlineCollapsed | boolean | - | 折叠内联菜单布局。 | | inlineIndent | number | 24 | 内联模式的缩进宽度。 | | itemIcon | ReactNode \| (props: RenderIconInfo) => ReactNode | - | 自定义项目图标。 | | items | ItemType[] | - | 菜单项配置。 | | mode | 'horizontal' \| 'vertical' \| 'inline' | vertical | 菜单展示模式。 | | motion | CSSMotionProps | - | 菜单转换的运动配置。 | | multiple | boolean | false | 允许选择多个项目。 | | openKeys | string[] | - | 受控打开子菜单键。 | | overflowedIndicator | ReactNode | "..." | 为溢出项目呈现的指示器。 | | popupRender | (node, info) => ReactNode | - | 自定义弹层菜单渲染。 | | prefixCls | string | rc-menu | className 前缀。 | | rootClassName | string | - | 根包装器的 className。 | | selectable | boolean | true | 允许选择项目。 | | selectedKeys | string[] | - | 控制选定的项目键。 | | styles | Partial<Record<'list' \| 'listTitle', CSSProperties>> | - | 菜单槽的语义样式。 | | subMenuCloseDelay | number | 0.1 | 关闭弹层子菜单之前延迟几秒。 | | subMenuOpenDelay | number | 0.1 | 打开弹层子菜单之前延迟几秒。 | | triggerSubMenuAction | 'click' \| 'hover' | hover | 打开子菜单的交互。 | | onClick | (info: MenuInfo) => void | - | 单击某个项目时触发。 | | onDeselect | (info: SelectInfo) => void | - | 取消选择某个项目时触发。 | | onOpenChange | (openKeys: string[]) => void | - | 当打开键更改时触发。 | | onSelect | (info: SelectInfo) => void | - | 选择项目时触发。 |

ItemType

type ItemType =
  | {
      type?: 'item';
      // Item keys accept React.Key and are normalized to strings in event info.
      key: React.Key;
      label?: React.ReactNode;
      disabled?: boolean;
      itemIcon?: RenderIconType;
      extra?: React.ReactNode;
    }
  | {
      type?: 'submenu';
      // Sub menu keys are strings to match openKeys/defaultOpenKeys.
      key: string;
      label?: React.ReactNode;
      children: ItemType[];
      disabled?: boolean;
    }
  | {
      type: 'group';
      label?: React.ReactNode;
      children?: ItemType[];
    }
  | {
      type: 'divider';
    };

Ref

| Method | 类型 | 说明 | | ---------- | ------------------------------------------ | -------------------------------- | | focus | (options?: FocusOptions) => void | 聚焦活动项目或第一个启用的项目。 | | findItem | ({ key: string }) => HTMLElement \| null | 查找项目键的 DOM 元素。 | | list | HTMLUListElement | 根菜单列表元素。 |

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/menu 基于 MIT 许可证发布。