rat-menu

组件介绍

• category: Components
• chinese: 菜单
• type: 展示

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 | 'inline' | | triggerType | 子菜单打开的触发行为可选值:'click', 'hover' | Enum | 'click' | | openMode | 展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效可选值:'single', 'multiple' | Enum | 'multiple' | | inlineIndent | 内连子菜单缩进距离 | Number | 20 | | 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} 菜单项的 keyextra.label: {Object} 菜单项的文本extra.keyPath: {Array} 菜单项 key 的路径 | Function | () => {} | | selectMode | 选中模式，单选还是多选，默认无值，不可选可选值:'single', 'multiple' | Enum | - | | shallowSelect | 是否只能选择第一层菜单项（不能选择子菜单中的菜单项） | Boolean | false | | hasSelectedIcon | 是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分 | Boolean | true | | direction | 菜单第一层展示方向可选值:'ver', 'hoz' | Enum | 'ver' | | hozAlign | 横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效可选值:'left', 'right' | Enum | 'left' | | header | 自定义菜单头部 | ReactNode | - | | footer | 自定义菜单尾部 | ReactNode | - | | autoFocus | 是否自动获得焦点 | Boolean | false | | focusedKey | 当前获得焦点的子菜单或菜单项 key 值 | String | - |

Menu.Item

| 参数 | 说明 | 类型 | 默认值 | | -------- | ------- | --------- | ----- | | disabled | 是否禁用 | 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.Group

| 参数 | 说明 | 类型 | 默认值 | | -------- | ---- | --------- | --- | | label | 标签内容 | ReactNode | - | | children | 菜单项 | ReactNode | - |

Menu.Divider

ARIA and KeyBoard

| 按键 | 说明 | | :---------- | :------------------------------ | | Up Arrow | 导航到上一项 | | Down Arrow | 导航到下一项 | | Right Arrow | 打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项 | | Left Arrow | 关闭子菜单，导航到父级菜单；横向菜单条第一层，导航都左一项 | | Enter | 打开子菜单，导航到子菜单第一项 | | Esc | 关闭子菜单，导航到父级菜单 | | SPACE | 切换选中状态 |