-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
菜单 Menusissue v2.0.14- v2.0.14
- v2.0.13
- v2.0.12
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.8
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v2.0.0
- v1.1.0
- v1.0.11
- v1.0.10
- v1.0.9
- v1.0.9-beta3
- v1.0.9-beta
- v1.0.8
- v1.0.7
- v1.0.6
- v1.0.5
- v2.0.14
- v2.0.13
- v2.0.12
- v2.0.11
- v2.0.10
- v2.0.9
- v2.0.8
- v2.0.7
- v2.0.6
- v2.0.5
- v2.0.4
- v2.0.3
- v2.0.2
- v2.0.1
- v2.0.0
- v1.1.0
- v1.0.11
- v1.0.10
- v1.0.9
- v1.0.9-beta3
- v1.0.9-beta
- v1.0.8
- v1.0.7
- v1.0.6
- v1.0.5
菜单对于网站来说很重要,它帮助用户快速地从一个站点跳转到另一个站点。侧导航提供网站的多层次结构。
何时使用
需要将数据作为菜单展示时
如何使用
import { Menus } from 'tinper-bee';
or
import Menus from 'bee-menus';
import 'bee-menus/build/Menu.css';
能力特性
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 | - |
attribute | 添加到dom上的属性 | Object | - |
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 | - |
position | mode=='vertical' 条件下,菜单显示位置,可选 'horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline' |
string | - |
已支持的键盘操作
注意:目前支持两种写法,参考示例7和示例8
按键 | 功能 |
---|---|
Tab+↓(下箭) | 切换焦点 |
↑(上箭) | 切换选项 |
↓(下箭) | 切换选项 |
←(左箭) | 关闭下级菜单 |
→(右箭) | 打开下级菜单 |
enter | 选中 |
注意事项
使用全键盘操作切换焦点的时候,同时按Tab+↓(下箭)即可切换。 暂无
更新日志
-
v2.0.14 2020-08-13 ( release地址 )
-
v2.0.11 2019-10-10 ( release地址 )
- bee-menus @2.0.11
- [Feature]底层支持 DNDclick 事件
- bee-menus @2.0.11
-
v2.0.10 2019-08-30 ( release地址 )
- bee-menus @2.0.10
- [ Fixbug ] mode= horizontal 子菜单渲染bug #321
- bee-menus @2.0.10
-
v2.0.9 2019-07-25 ( release地址 )
- bee-menus @2.0.9
- [ Fixbug ] 解决了切换焦点时触发下箭头的问题
- bee-menus @2.0.9
-
v2.0.7 2019-05-16 ( release地址 )
- bee-menus @2.0.7
- [Fixbug]解决鼠标缓慢移动时,横向菜单消失的问题
- bee-menus @2.0.7
-
v2.0.6 2019-04-01 ( release地址 )
- [Feature]bee-menus @2.0.6,修改“dark”主题的menus样式
-
v2.0.5 2019-04-01 ( release地址 )
- [Feature]bee-menus @2.0.5,优化“dark”主题的menus样式
-
v2.0.4 2019-03-18 ( release地址 )
bee-menus v2.0.4升级内容
- [Feature]bee-menus @2.0.4
- 主文字颜色统一为#212121
- 图标颜色统一为#505F79
- 不可点的文字颜色统一为#909090
- [Feature]bee-menus @2.0.4
-
v2.0.3 2019-03-18 ( release地址 )
bee-menus v2.0.3升级内容
- [Feature]bee-menus @2.0.3,选中背景色由灰色改为米黄色(#FFF7E7)