Rat-menu NPM | npm.io

rat-menu

组件介绍

category: Components
chinese: 菜单
type: 展示

API

参数	说明	类型	默认值
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	切换选中状态