index.md

Menu

• category: Components
• family: DataDisplay
• 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} 菜单项的 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'
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.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	切换选中状态