bee-menus
react bee-menus component for tinper-bee
some description...
使用方法
API
Menu
参数
说明
类型
默认值
className
自定义类名
string
-
theme
主题颜色
String: light dark
-
mode
菜单类型,现在支持垂直、水平、和内嵌模式三种
String: vertical horizontal inline
vertical
selectedKeys
当前选中的菜单项 key 数组
Array
-
defaultSelectedKeys
初始选中的菜单项 key 数组
Array
-
openKeys
当前展开的 SubMenu 菜单项 key 数组
Array
-
defaultOpenKeys
初始展开的 SubMenu 菜单项 key 数组
-
onOpenChange
SubMenu 展开/关闭的回调 Function(openKeys: string[])
noop
onSelect
被选中时调
Function({ item, key, selectedKeys })
-
onDeselect
取消选中时调用,仅在 multiple 生效
Function({ item, key, selectedKeys })
-
onClick
点击 menuitem 调用此函数,参数为 {item, key, keyPath}
function
-
style
根节点样式
Object
-
keyboard
是否使用键盘操作
bool
false
tabIndex
设置tabIndex
string
0
Children
MenuItem组件/SubMenu组件/MenuItemGroup组件
node
-
Menu.Item
参数
说明
类型
默认值
disabled
是否禁用
Boolean
false
key
item 的唯一标志
String
-
Menu.SubMenu
参数
说明
类型
默认值
disabled
是否禁用
Boolean
false
key
唯一标志
String
title
子菜单项值
String or React.Element
children
子菜单的菜单项
(MenuItem or SubMenu)[]
onTitleClick
点击子菜单标题
Function({ eventKey, domEvent })
disabled
是否禁用
Boolean
false
key
item 的唯一标志
String
-
Children
MenuItem组件/SubMenu组件/MenuItemGroup组件
node
-
已支持的键盘操作
注意:目前支持两种写法,参考示例7和示例8
按键
功能
↑(上箭)
切换选项
↓(下箭)
切换选项
←(左箭)
关闭下级菜单
→(右箭)
打开下级菜单
enter
选中
开发调试
$ git clone https://github.com/tinper-bee/bee-menus
$ cd bee-menus
$ npm install
$ npm run dev