何时使用
当页面上的操作命令过多时,用此组件可以收纳操作元素。
搭配下拉按钮、文字按钮、选择框使用,并执行相应的命令
当页面上的操作命令过多时,用此组件可以收纳操作元素。
搭配下拉按钮、文字按钮、选择框使用,并执行相应的命令
通过设置 openMode 为 'single',可以让菜单同时只能展开一个内连子菜单,默认为可以同时展开多个。
展示弹出菜单的用法。
可以设置 triggerType 为 'hover',来 hover 打开子菜单,默认点击打开子菜单。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | () => {} |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
disabled | 是否禁用 | Boolean | false |
dangerous | 是否变成危险样式 | Boolean | false |
helper | 帮助文本 | ReactNode | - |
children | 菜单项标签内容 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 标签内容 | ReactNode | - |
selectable | 是否可选,该属性仅在设置 Menu 组件 selectMode 属性后生效 | Boolean | false |
mode | 子菜单打开方式,如果设置会覆盖 Menu 上的同名属性 可选值: 'inline', 'popup' | Enum | Menu 的 mode 属性值 |
children | 菜单项或下一级子菜单 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 标签内容 | ReactNode | - |
children | 自定义弹层内容 | ReactNode | - |
该子组件选中情况不受 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 | - |
该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制,请自行控制选中逻辑
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
checked | 是否选中 | Boolean | false |
disabled | 是否禁用 | Boolean | false |
onChange | 选中或取消选中触发的回调函数 签名: Function(checked: Boolean, event: Object) => void 参数: checked: {Boolean} 是否选中 event: {Object} 选中事件对象 | Function | () => {} |
helper | 帮助文本 | ReactNode | - |
children | 标签内容 | ReactNode | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 标签内容 | ReactNode | - |
children | 菜单项 | ReactNode | - |
创建上下文菜单。
props 参数可传入 Menu 所有支持的 props
props 额外支持 overlayProps,用来自定义 Menu 所在的弹层
按键 | 说明 |
---|---|
Up Arrow | 导航到上一项 |
Down Arrow | 导航到下一项 |
Right Arrow | 打开子菜单,导航到子菜单第一项;横向菜单条第一层,导航到右一项 |
Left Arrow | 关闭子菜单,导航到父级菜单;横向菜单条第一层,导航都左一项 |
Enter | 打开子菜单,导航到子菜单第一项 |
Esc | 关闭子菜单,导航到父级菜单 |
SPACE | 切换选中状态 |