README.zh-CN.md

@rc-component/menu

_{Ant Design 生态的一部分。}

🧭 React 菜单组件，支持水平、垂直、内联、分组和子菜单。

English | 简体中文

特性

• 水平、垂直和内联菜单模式。
• 受控和非受控选择、打开键和活动键状态。
• 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 许可证发布。