11<div align =" center " >
22 <h1 >@rc-component/menu</h1 >
3- <p ><sub >Ant Design 生态的一部分。</sub ></p >
4- <img alt =" Ant Design " height =" 32 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " />
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
54 <p >🧭 React 菜单组件,支持水平、垂直、内联、分组和子菜单。</p >
65</div >
76
1716
1817## 特性
1918
20- - Horizontal, vertical, and inline menu modes.
21- - Controlled and uncontrolled selection, open keys, and active key state.
22- - ` items ` configuration API with legacy children support.
23- - Sub menus, item groups, dividers, icons, overflow, popup rendering, and keyboard focus helpers.
19+ - 水平、垂直和内联菜单模式。
20+ - 受控和非受控选择、打开键和活动键状态。
21+ - ` items ` 配置 API 具有旧子支持。
22+ - 子菜单、项目组、分隔线、图标、溢出、弹层渲染和键盘焦点助手。
2423- 提供 TypeScript 类型定义和语义化 ` classNames ` / ` styles ` 插槽。
2524- 被 Ant Design 用作共享的 menu 基础能力。
2625
@@ -82,42 +81,42 @@ npm start
8281
8382| 参数 | 类型 | 默认值 | 说明 |
8483| --- | --- | --- | --- |
85- | activeKey | ` string ` | - | Controlled active item key. |
86- | builtinPlacements | ` Record<string, any> ` | - | Popup alignment placements for sub menus. |
87- | className | ` string ` | - | Class name for the root menu. |
88- | classNames | ` Partial<Record<'list' \| 'listTitle', string>> ` | - | Semantic class names for menu slots. |
89- | defaultActiveFirst | ` boolean ` | ` false ` | Focus the first enabled item when active key is absent. |
90- | defaultOpenKeys | ` string[] ` | ` [] ` | Initial open sub menu keys. |
91- | defaultSelectedKeys | ` string[] ` | ` [] ` | Initial selected item keys. |
92- | defaultMotions | ` Partial<Record<MenuMode \| 'other', CSSMotionProps>> ` | - | Motion config by menu mode. |
84+ | activeKey | ` string ` | - | 受控活动项目键。 |
85+ | builtinPlacements | ` Record<string, any> ` | - | 子菜单的弹层对齐位置。 |
86+ | className | ` string ` | - | 根菜单的className。 |
87+ | classNames | ` Partial<Record<'list' \| 'listTitle', string>> ` | - | 菜单槽的语义className称。 |
88+ | defaultActiveFirst | ` boolean ` | ` false ` | 当活动键不存在时,聚焦第一个启用的项目。 |
89+ | defaultOpenKeys | ` string[] ` | ` [] ` | 初始打开子菜单键。 |
90+ | defaultSelectedKeys | ` string[] ` | ` [] ` | 初始选定项目键。 |
91+ | defaultMotions | ` Partial<Record<MenuMode \| 'other', CSSMotionProps>> ` | - | 通过菜单模式进行运动配置。 |
9392| direction | ` 'ltr' \| 'rtl' ` | - | Layout direction. |
94- | disabled | ` boolean ` | ` false ` | Disable all menu interactions. |
95- | disabledOverflow | ` boolean ` | ` false ` | Disable overflow measurement. |
96- | expandIcon | ` ReactNode \| (props: RenderIconInfo) => ReactNode ` | - | Custom sub menu expand icon. |
97- | forceSubMenuRender | ` boolean ` | ` false ` | Render popup sub menus before they are opened. |
98- | getPopupContainer | ` (node: HTMLElement) => HTMLElement ` | - | Container for popup sub menus. |
99- | inlineCollapsed | ` boolean ` | - | Collapse inline menu layout. |
100- | inlineIndent | ` number ` | ` 24 ` | Indent width for inline mode. |
101- | itemIcon | ` ReactNode \| (props: RenderIconInfo) => ReactNode ` | - | Custom item icon. |
102- | items | ` ItemType[] ` | - | Menu item configuration. |
93+ | disabled | ` boolean ` | ` false ` | 禁用所有菜单交互。 |
94+ | disabledOverflow | ` boolean ` | ` false ` | 禁用溢出测量。 |
95+ | expandIcon | ` ReactNode \| (props: RenderIconInfo) => ReactNode ` | - | 自定义子菜单展开图标。 |
96+ | forceSubMenuRender | ` boolean ` | ` false ` | 在打开弹层子菜单之前渲染它们。 |
97+ | getPopupContainer | ` (node: HTMLElement) => HTMLElement ` | - | 弹层子菜单的容器。 |
98+ | inlineCollapsed | ` boolean ` | - | 折叠内联菜单布局。 |
99+ | inlineIndent | ` number ` | ` 24 ` | 内联模式的缩进宽度。 |
100+ | itemIcon | ` ReactNode \| (props: RenderIconInfo) => ReactNode ` | - | 自定义项目图标。 |
101+ | 项目 | ` ItemType[] ` | - | 菜单项配置。 |
103102| mode | ` 'horizontal' \| 'vertical' \| 'inline' ` | ` vertical ` | Menu display mode. |
104- | motion | ` CSSMotionProps ` | - | Motion config for menu transitions. |
105- | multiple | ` boolean ` | ` false ` | Allow multiple selected items. |
106- | openKeys | ` string[] ` | - | Controlled open sub menu keys. |
107- | overflowedIndicator | ` ReactNode ` | ` "..." ` | Indicator rendered for overflowed items. |
108- | popupRender | ` (node, info) => ReactNode ` | - | Customize popup menu rendering. |
109- | prefixCls | ` string ` | ` rc-menu ` | Class name prefix. |
110- | rootClassName | ` string ` | - | Class name for the root wrapper. |
111- | selectable | ` boolean ` | ` true ` | Allow item selection. |
112- | selectedKeys | ` string[] ` | - | Controlled selected item keys. |
113- | styles | ` Partial<Record<'list' \| 'listTitle', CSSProperties>> ` | - | Semantic styles for menu slots. |
114- | subMenuCloseDelay | ` number ` | ` 0.1 ` | Delay in seconds before closing popup sub menus. |
115- | subMenuOpenDelay | ` number ` | ` 0.1 ` | Delay in seconds before opening popup sub menus. |
116- | triggerSubMenuAction | ` 'click' \| 'hover' ` | ` hover ` | Interaction that opens sub menus. |
117- | onClick | ` (info: MenuInfo) => void ` | - | Triggered when an item is clicked. |
118- | onDeselect | ` (info: SelectInfo) => void ` | - | Triggered when an item is deselected. |
119- | onOpenChange | ` (openKeys: string[]) => void ` | - | Triggered when open keys change. |
120- | onSelect | ` (info: SelectInfo) => void ` | - | Triggered when an item is selected. |
103+ | 运动 | ` CSSMotionProps ` | - | 菜单转换的运动配置。 |
104+ | multiple | ` boolean ` | ` false ` | 允许选择多个项目。 |
105+ | openKeys | ` string[] ` | - | 受控打开子菜单键。 |
106+ | overflowedIndicator | ` ReactNode ` | ` "..." ` | 为溢出项目呈现的指示器。 |
107+ | popupRender | ` (node, info) => ReactNode ` | - | 自定义弹层菜单渲染。 |
108+ | prefixCls | ` string ` | ` rc-menu ` | className前缀。 |
109+ | rootClassName | ` string ` | - | 根包装器的className。 |
110+ | selectable | ` boolean ` | ` true ` | 允许选择项目。 |
111+ | selectedKeys | ` string[] ` | - | 控制选定的项目键。 |
112+ | styles | ` Partial<Record<'list' \| 'listTitle', CSSProperties>> ` | - | 菜单槽的语义样式。 |
113+ | subMenuCloseDelay | ` number ` | ` 0.1 ` | 关闭弹层子菜单之前延迟几秒。 |
114+ | subMenuOpenDelay | ` number ` | ` 0.1 ` | 打开弹层子菜单之前延迟几秒。 |
115+ | triggerSubMenuAction | ` 'click' \| 'hover' ` | ` hover ` | 打开子菜单的交互。 |
116+ | onClick | ` (info: MenuInfo) => void ` | - | 单击某个项目时触发。 |
117+ | onDeselect | ` (info: SelectInfo) => void ` | - | 取消选择某个项目时触发。 |
118+ | onOpenChange | ` (openKeys: string[]) => void ` | - | 当打开键更改时触发。 |
119+ | onSelect | ` (info: SelectInfo) => void ` | - | 选择项目时触发。 |
121120
122121### ItemType
123122
@@ -154,9 +153,9 @@ type ItemType =
154153
155154| Method | 类型 | 说明 |
156155| --- | --- | --- |
157- | ` focus ` | ` (options?: FocusOptions) => void ` | Focus the active item or first enabled item. |
158- | ` findItem ` | ` ({ key: string }) => HTMLElement \| null ` | Find the DOM element for an item key. |
159- | ` list ` | ` HTMLUListElement ` | Root menu list element. |
156+ | ` focus ` | ` (options?: FocusOptions) => void ` | 聚焦活动项目或第一个启用的项目。 |
157+ | ` findItem ` | ` ({ key: string }) => HTMLElement \| null ` | 查找项目键的 DOM 元素。 |
158+ | ` list ` | ` HTMLUListElement ` | 根菜单列表元素。 |
160159
161160## 本地开发
162161
@@ -175,11 +174,11 @@ npm run build
175174npm run prepublishOnly
176175```
177176
178- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
177+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
179178
180179## 许可证
181180
182- @rc-component/menu is released under the [ MIT] ( ./LICENSE.md ) license.
181+ @rc-component/menu 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
183182
184183[ npm-image ] : https://img.shields.io/npm/v/@rc-component/menu.svg?style=flat-square
185184[ npm-url ] : https://npmjs.org/package/@rc-component/menu
0 commit comments