| 1 | # bee-menus
|
| 2 | [](https://www.npmjs.com/package/bee-menus)
|
| 3 | [](https://travis-ci.org/tinper-bee/bee-menus)
|
| 4 | [](https://david-dm.org/tinper-bee/bee-menus#info=devDependencies)
|
| 5 |
|
| 6 |
|
| 7 | react bee-menus component for tinper-bee
|
| 8 |
|
| 9 | some description...
|
| 10 |
|
| 11 | ## 使用方法
|
| 12 |
|
| 13 | ```js
|
| 14 |
|
| 15 | ```
|
| 16 |
|
| 17 | ### API
|
| 18 |
|
| 19 | ## Menu
|
| 20 |
|
| 21 | |参数|说明|类型|默认值|
|
| 22 | |:---|:----|:---|:------|
|
| 23 | |className|自定义类名|string|-|
|
| 24 | |theme|主题颜色|String: light dark|-|
|
| 25 | |mode|菜单类型，现在支持垂直、水平、和内嵌模式三种 |String: vertical horizontal inline|vertical|
|
| 26 | |selectedKeys|当前选中的菜单项 key 数组|Array|-|
|
| 27 | |defaultSelectedKeys|初始选中的菜单项 key 数组|Array|-|
|
| 28 | |openKeys|当前展开的 SubMenu 菜单项 key 数组|Array|-|
|
| 29 | |defaultOpenKeys|初始展开的 SubMenu 菜单项 key 数组|-|
|
| 30 | |onOpenChange|SubMenu 展开/关闭的回调 Function(openKeys: string[])|noop|
|
| 31 | |onSelect|被选中时调| Function({ item, key, selectedKeys })|-|
|
| 32 | |onDeselect|取消选中时调用，仅在 multiple 生效| Function({ item, key, selectedKeys })|-|
|
| 33 | |onClick|点击 menuitem 调用此函数，参数为 {item, key, keyPath}| function|-|
|
| 34 | |style|根节点样式|Object|-|
|
| 35 | |keyboard|是否使用键盘操作|bool|false|
|
| 36 | |tabIndex|设置tabIndex|string|0|
|
| 37 | |Children|MenuItem组件/SubMenu组件/MenuItemGroup组件|node|-|
|
| 38 |
|
| 39 | ## Menu.Item
|
| 40 |
|
| 41 | |参数|说明|类型|默认值|
|
| 42 | |:---|:----|:---|:------|
|
| 43 | |disabled|是否禁用|Boolean|false|
|
| 44 | |key|item 的唯一标志|String|-|
|
| 45 |
|
| 46 | ## Menu.SubMenu
|
| 47 |
|
| 48 | |参数|说明|类型|默认值|
|
| 49 | |:---|:----|:---|:------|
|
| 50 | |disabled|是否禁用|Boolean|false|
|
| 51 | |key|唯一标志|String|
|
| 52 | |title|子菜单项值 |String or React.Element|
|
| 53 | |children|子菜单的菜单项|(MenuItem or SubMenu)[]|
|
| 54 | |onTitleClick|点击子菜单标题|Function({ eventKey, domEvent })|
|
| 55 | |disabled|是否禁用|Boolean|false|
|
| 56 | |key|item 的唯一标志|String|-|
|
| 57 | |Children|MenuItem组件/SubMenu组件/MenuItemGroup组件|node|-|
|
| 58 |
|
| 59 |
|
| 60 | ## 已支持的键盘操作
|
| 61 |
|
| 62 | 注意：目前支持两种写法，参考示例7和示例8
|
| 63 |
|
| 64 | |按键|功能|
|
| 65 | |:---|:----|
|
| 66 | |↑(上箭)|切换选项|
|
| 67 | |↓(下箭) |切换选项|
|
| 68 | |←(左箭) |关闭下级菜单|
|
| 69 | |→(右箭) |打开下级菜单|
|
| 70 | |enter | 选中|
|
| 71 |
|
| 72 |
|
| 73 | #### 开发调试
|
| 74 |
|
| 75 | ```sh
|
| 76 | $ git clone https://github.com/tinper-bee/bee-menus
|
| 77 | $ cd bee-menus
|
| 78 | $ npm install
|
| 79 | $ npm run dev
|
| 80 | ```
|