菜单 Menus
issue

菜单对于网站来说很重要,它帮助用户快速地从一个站点跳转到另一个站点。侧导航提供网站的多层次结构。

何时使用

需要将数据作为菜单展示时

如何使用

import { Menus } from 'tinper-bee';

or

import Menus from 'bee-menus';
import 'bee-menus/build/Menu.css';

能力特性

API

参数 说明 类型 默认值
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 -
参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key item 的唯一标志 String -
attribute 添加到dom上的属性 Object -
参数 说明 类型 默认值
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.13 2020-04-24 ( release地址 )

    Bug Fixes

  • v2.0.11 2019-10-10 ( release地址 )

    • bee-menus @2.0.11
      • [Feature]底层支持 DNDclick 事件
  • v2.0.10 2019-08-30 ( release地址 )

    • bee-menus @2.0.10
      • [ Fixbug ] mode= horizontal 子菜单渲染bug #321
  • v2.0.9 2019-07-25 ( release地址 )

    • bee-menus @2.0.9
      • [ Fixbug ] 解决了切换焦点时触发下箭头的问题
  • v2.0.7 2019-05-16 ( release地址 )

    • bee-menus @2.0.7
      • [Fixbug]解决鼠标缓慢移动时,横向菜单消失的问题
  • 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
  • v2.0.3 2019-03-18 ( release地址 )

    bee-menus v2.0.3升级内容

    • [Feature]bee-menus @2.0.3,选中背景色由灰色改为米黄色(#FFF7E7)