何时使用
当页面上的操作命令过多时，用此组件可以收纳操作元素。
搭配下拉按钮、文字按钮、选择框使用，并执行相应的命令
API
Menu
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| children | 菜单项和子菜单 | ReactNode | - |
| onItemClick | 点击菜单项触发的回调函数 签名: Function(key: String, item: Object, event: Object) => void 参数: key: {String} 点击的菜单项的 key 值 item: {Object} 点击的菜单项对象 event: {Object} 点击的事件对象 | Function | () => {} |
| openKeys | 当前打开的子菜单的 key 值 | String/Array | - |
| defaultOpenKeys | 初始打开的子菜单的 key 值 | String/Array | [] |
| defaultOpenAll | 初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeys | Boolean | false |
| onOpen | 打开或关闭子菜单触发的回调函数 签名: Function(key: String, extra: Object) => void 参数: key: {String} 打开的所有子菜单的 key 值 extra: {Object} 额外参数 extra.key: {String} 当前操作子菜单的 key 值 extra.open: {Boolean} 是否是打开 | Function | () => {} |
| mode | 子菜单打开的模式 可选值: 'inline', 'popup' | Enum | 'popup' |
| triggerType | 子菜单打开的触发行为 可选值: 'click', 'hover' | Enum | 'click' |
| openMode | 展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效 可选值: 'single', 'multiple' | Enum | 'multiple' |
| inlineIndent | 内连子菜单缩进距离 | Number | 20 |
| iconArrowType | 下拉图标类型，可选类型：'chevron', 'triangle' | String | 'chevron' |
| popupAutoWidth | 是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理 | Boolean | false |
| popupAlign | 弹层的对齐方式 可选值: 'follow', 'outside' | Enum | 'follow' |
| popupProps | 弹层自定义 props | Object/Function | {} |
| popupClassName | 弹出子菜单自定义 className | String | - |
| popupStyle | 弹出子菜单自定义 style | Object | - |
| selectedKeys | 当前选中菜单项的 key 值 | String/Array | - |
| defaultSelectedKeys | 初始选中菜单项的 key 值 | String/Array | [] |
| onSelect | 选中或取消选中菜单项触发的回调函数 签名: Function(selectedKeys: Array, item: Object, extra: Object) => void 参数: selectedKeys: {Array} 选中的所有菜单项的值 item: {Object} 选中或取消选中的菜单项 extra: {Object} 额外参数 extra.select: {Boolean} 是否是选中 extra.key: {Array} 菜单项的 key extra.label: {Object} 菜单项的文本 extra.keyPath: {Array} 菜单项 key 的路径 | Function | () => {} |
| selectMode | 选中模式，单选还是多选，默认无值，不可选 可选值: 'single', 'multiple' | Enum | - |
| shallowSelect | 是否只能选择第一层菜单项（不能选择子菜单中的菜单项） | Boolean | false |
| hasSelectedIcon | 是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分 | Boolean | true |
| isSelectIconRight | 是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。 注意：SubMenu 上的选中图标一直居左，不受此API控制 | Boolean | false |
| direction | 菜单第一层展示方向 可选值: 'ver', 'hoz' | Enum | 'ver' |
| hozAlign | 横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效 可选值: 'left', 'right' | Enum | 'left' |
| hozInLine | 横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction='hoz' mode='popup' 时生效 | Boolean | false |
| header | 自定义菜单头部 | ReactNode | - |
| footer | 自定义菜单尾部 | ReactNode | - |
| autoFocus | 是否自动获得焦点 | Boolean | false |
| focusedKey | 当前获得焦点的子菜单或菜单项 key 值 | String | - |
| embeddable | 是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合<Menu style={{lineHeight: '100px'}}> 自定义高度 | Boolean | false |
| onScroll | 1.3.2添加，滚动回调，由于触发频繁，注意作好防抖 | Function | () => {} |
Menu.Item
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disabled | 是否禁用 | Boolean | false |
| dangerous | 是否变成危险样式 | Boolean | false |
| helper | 帮助文本 | ReactNode | - |
| children | 菜单项标签内容 | ReactNode | - |
Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签内容 | ReactNode | - |
| selectable | 是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效 | Boolean | false |
| mode | 子菜单打开方式，如果设置会覆盖 Menu 上的同名属性 可选值: 'inline', 'popup' | Enum | Menu 的 mode 属性值 |
| children | 菜单项或下一级子菜单 | ReactNode | - |
Menu.PopupItem
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签内容 | ReactNode | - |
| children | 自定义弹层内容 | ReactNode | - |
Menu.CheckboxItem
该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制，请自行控制选中逻辑
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 是否选中 | Boolean | false |
| indeterminate | 是否半选中 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| onChange | 选中或取消选中触发的回调函数 签名: Function(checked: Boolean, event: Object) => void 参数: checked: {Boolean} 是否选中 event: {Object} 选中事件对象 | Function | () => {} |
| helper | 帮助文本 | ReactNode | - |
| children | 标签内容 | ReactNode | - |
Menu.RadioItem
该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制，请自行控制选中逻辑
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 是否选中 | Boolean | false |
| disabled | 是否禁用 | Boolean | false |
| onChange | 选中或取消选中触发的回调函数 签名: Function(checked: Boolean, event: Object) => void 参数: checked: {Boolean} 是否选中 event: {Object} 选中事件对象 | Function | () => {} |
| helper | 帮助文本 | ReactNode | - |
| children | 标签内容 | ReactNode | - |
Menu.Group
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 标签内容 | ReactNode | - |
| children | 菜单项 | ReactNode | - |
Menu.Divider
Menu.create(props)
创建上下文菜单。
props 参数可传入 Menu 所有支持的 props
props 额外支持 overlayProps，用来自定义 Menu 所在的弹层
ARIA and KeyBoard
| 按键 | 说明 |
|---|---|
| Up Arrow | 导航到上一项 |
| Down Arrow | 导航到下一项 |
| Right Arrow | 打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项 |
| Left Arrow | 关闭子菜单，导航到父级菜单；横向菜单条第一层，导航都左一项 |
| Enter | 打开子菜单，导航到子菜单第一项 |
| Esc | 关闭子菜单，导航到父级菜单 |
| SPACE | 切换选中状态 |