Menu 菜单

用于收藏选项的悬浮容器

何时使用

  • 当页面上的操作命令过多时,用此组件可以收纳操作元素。

  • 搭配下拉按钮、文字按钮、选择框使用,并执行相应的命令

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' 下生效,优先级高于 defaultOpenKeysBooleanfalse
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内连子菜单缩进距离Number20
iconArrowType下拉图标类型,可选类型:'chevron', 'triangle'String'chevron'
popupAutoWidth是否自动让弹层的宽度和菜单项保持一致,如果弹层的宽度比菜单项小则和菜单项保持一致,如果宽度大于菜单项则不做处理Booleanfalse
popupAlign弹层的对齐方式

可选值:
'follow', 'outside'
Enum'follow'
popupProps弹层自定义 propsObject/Function{}
popupClassName弹出子菜单自定义 classNameString-
popupStyle弹出子菜单自定义 styleObject-
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是否只能选择第一层菜单项(不能选择子菜单中的菜单项)Booleanfalse
hasSelectedIcon是否显示选中图标,如果设置为 false 需配合配置平台设置选中时的背景色以示区分Booleantrue
isSelectIconRight是否将选中图标居右,仅当 hasSelectedIcon 为true 时生效。
注意:SubMenu 上的选中图标一直居左,不受此API控制
Booleanfalse
direction菜单第一层展示方向

可选值:
'ver', 'hoz'
Enum'ver'
hozAlign横向菜单条 item 和 footer 的对齐方向,在 direction 设置为 'hoz' 并且 header 存在时生效

可选值:
'left', 'right'
Enum'left'
hozInLine横向菜单模式下,是否维持在一行,即超出一行折叠成 SubMenu 显示, 仅在 direction='hoz' mode='popup' 时生效Booleanfalse
header自定义菜单头部ReactNode-
footer自定义菜单尾部ReactNode-
autoFocus是否自动获得焦点Booleanfalse
focusedKey当前获得焦点的子菜单或菜单项 key 值String-
embeddable是否开启嵌入式模式,一般用于Layout的布局中,开启后没有默认背景、外层border、box-shadow,可以配合<Menu style={{lineHeight: '100px'}}> 自定义高度Booleanfalse

Menu.Item

参数说明类型默认值
disabled是否禁用Booleanfalse
dangerous是否变成危险样式Booleanfalse
helper帮助文本ReactNode-
children菜单项标签内容ReactNode-

Menu.SubMenu

参数说明类型默认值
label标签内容ReactNode-
selectable是否可选,该属性仅在设置 Menu 组件 selectMode 属性后生效Booleanfalse
mode子菜单打开方式,如果设置会覆盖 Menu 上的同名属性

可选值:
'inline', 'popup'
EnumMenu 的 mode 属性值
children菜单项或下一级子菜单ReactNode-

Menu.PopupItem

参数说明类型默认值
label标签内容ReactNode-
children自定义弹层内容ReactNode-

Menu.CheckboxItem

该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制,请自行控制选中逻辑

参数说明类型默认值
checked是否选中Booleanfalse
indeterminate是否半选中Booleanfalse
disabled是否禁用Booleanfalse
onChange选中或取消选中触发的回调函数

签名:
Function(checked: Boolean, event: Object) => void
参数:
checked: {Boolean} 是否选中
event: {Object} 选中事件对象
Function() => {}
helper帮助文本ReactNode-
children标签内容ReactNode-

Menu.RadioItem

该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制,请自行控制选中逻辑

参数说明类型默认值
checked是否选中Booleanfalse
disabled是否禁用Booleanfalse
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切换选中状态