1 | # bee-menus
|
2 | [![npm version](https://img.shields.io/npm/v/bee-menus.svg)](https://www.npmjs.com/package/bee-menus)
|
3 | [![Build Status](https://img.shields.io/travis/tinper-bee/bee-menus/master.svg)](https://travis-ci.org/tinper-bee/bee-menus)
|
4 | [![devDependency Status](https://img.shields.io/david/dev/tinper-bee/bee-menus.svg)](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 | |Children|MenuItem组件/SubMenu组件/MenuItemGroup组件|node|-|
|
37 |
|
38 | ## Menu.Item
|
39 |
|
40 | |参数|说明|类型|默认值|
|
41 | |:---|:----|:---|:------|
|
42 | |disabled|是否禁用|Boolean|false|
|
43 | |key|item 的唯一标志|String|-|
|
44 |
|
45 | ## Menu.SubMenu
|
46 |
|
47 | |参数|说明|类型|默认值|
|
48 | |:---|:----|:---|:------|
|
49 | |disabled|是否禁用|Boolean|false|
|
50 | |key|唯一标志|String|
|
51 | |title|子菜单项值 |String or React.Element|
|
52 | |children|子菜单的菜单项|(MenuItem or SubMenu)[]|
|
53 | |onTitleClick|点击子菜单标题|Function({ eventKey, domEvent })|
|
54 | |disabled|是否禁用|Boolean|false|
|
55 | |key|item 的唯一标志|String|-|
|
56 | |Children|MenuItem组件/SubMenu组件/MenuItemGroup组件|node|-|
|
57 |
|
58 |
|
59 | ## 已支持的键盘操作
|
60 |
|
61 | 注意:目前支持两种写法,参考示例7和示例8
|
62 |
|
63 | |按键|功能|
|
64 | |:---|:----|
|
65 | |↑(上箭)|切换选项|
|
66 | |↓(下箭) |切换选项|
|
67 | |←(左箭) |关闭下级菜单|
|
68 | |→(右箭) |打开下级菜单|
|
69 | |enter | 选中|
|
70 |
|
71 |
|
72 | #### 开发调试
|
73 |
|
74 | ```sh
|
75 | $ git clone https://github.com/tinper-bee/bee-menus
|
76 | $ cd bee-menus
|
77 | $ npm install
|
78 | $ npm run dev
|
79 | ```
|