一个菜单组件,提供带有图标、描述和键盘快捷键的选项列表。
获取组件
#
import { Menu } from 'rsuite';
Menu 下拉菜单。
Menu.Item 下拉菜单选项。
Menu.Separator 用于分组的分割线。
演示
#
默认
#
路由
#
Menu.Item 组件可通过 as 属性与其他路由库(如 Next.js、React Router)结合使用。详见组合指南。
Props
#
| 属性名称 |
类型 (默认值) |
描述 |
| activeKey |
string | number |
设置菜单选中项的值 |
| as |
ElementType ('ul') |
为组件自定义元素类型 |
| classPrefix |
string ('menu') |
组件 CSS 类的前缀 |
| onSelect |
(eventKey: string | number | undefined, event) => void |
选择菜单项后的回调函数 |
| 属性名称 |
类型 (默认值) |
描述 |
| active |
boolean |
激活当前选项 |
| as |
ElementType ('li') |
为组件自定义元素类型 |
| classPrefix |
string ('menu-item') |
组件 CSS 类的前缀 |
| description |
ReactNode |
当前选项的描述 |
| disabled |
boolean |
禁用当前选项 |
| eventKey |
string | number |
当前选项的值 |
| icon |
ReactElement |
设置图标 |
| onSelect |
(eventKey: string | number, event) => void |
选中当前选项的回调函数 |
| shortcut |
string |
菜单项的键盘快捷键 |
| 属性名称 |
类型 (默认值) |
描述 |
| as |
ElementType ('li') |
为组件自定义元素类型 |
| classPrefix |
string ('menu-item-divider') |
组件 CSS 类的前缀 |