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