默认主题
菜单

示例

menu 1
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
Option 1
Option 2
menu 4
基础用法

Menu定义菜单,MenuItem定义菜单项,将Menu嵌套在MenuItem下,可以定义子菜单;expandedKeys定义菜单展开项,selectedKey定义菜单选中项。我们必须给MenuItem指定一个全局唯一的key用来标识每一个菜单项;通过to属性,可以定义超链接菜单,另外也可以绑定MenuItemselect事件来定义菜单项被选中的行为

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
menu 1
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 4
切换主题

通过theme属性可以指定主题:dark light,默认dark

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
menu 1
sub menu 1
sub menu 2
menu 2
menu 3
sub menu 1
Option 1
sub menu 2
sub menu 3
sub menu 4
Option 1
Option 2
menu 4
sub menu 1
sub menu 2
手风琴

添加accordion属性,可以使菜单每次只能展开一项

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
Header
menu 1
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
menu 4
自定义头部和添加圆点

Menu添加dot属性,即可以让当前菜单下所有子元素MenuItem(不包括嵌套MenuItem)前面展示圆点;给MenuItem单独指定dot可以控制当前菜单项是否展示圆点;通过header扩展点可以给菜单添加头部信息

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
展开
收起
dark
light


menu 1
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
option 1
option 2
menu 4
展开收起

添加collapse属性,可以使菜单呈现折叠状态

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
menu 1
menu 2
menu 3
menu 4


dark
light
水平菜单

通过type属性,可以定义菜单垂直或者水平排列:vertical horizontal,默认vertical

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
展开
收起
dark
light
vertical
horizontal


Header
menu 1
menu 2
menu 3
sub menu 1
sub menu 2
sub menu 3
sub menu 4
option 1
option 2
menu 4
尺寸

通过size属性,可以定义菜单的尺寸:large default small

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

属性

Menu

属性 说明 类型 默认值
expandedKeys 定义菜单展开项 Array []
selectedKey 定义菜单选中项 String ""
theme 定义菜单主题 "light" | "dark" "dark"
collapse 菜单是否折叠 Boolean false
type 定义菜单排列方式:垂直,水平 "vertical" | "horizontal" "vertical"
size 定义菜单尺寸 "large" | "default" | "small" "default"
accordion 是否每次只能展开一项 Boolean false
dot 是否给菜单项前面添加圆点 Boolean false

MenuItem

属性 说明 类型 默认值
key 定义全局唯一的key,用于标识每一项 String undefined
to 定义超链接菜单项,点击直接跳转 String undefined
dot 是否给当前菜单项前面添加圆点 Boolean false

扩展点

Menu

名称 说明
header 扩展菜单头部

事件

MenuItem

事件名 说明 参数
click 点击菜单项触发,不管该菜单项是否包含子菜单 Event
select 选中没有子菜单的菜单项触发 MenuItem, Event