菜单栏 KLSidebar

基本形式

KLSidebar只是对KLMenu的进一步封装,如果无法满足需求,可直接使用KLMenu组件; 除了KLMenu的功能外, 需要注意的是,原来的菜单展开/收起的功能, 移至KLAside组件; 注意:如果是单页,需要额外配置router属性,并将页面链接的url属性改为route属性;

<div class="demo-main">
<div class="demo-head">
<img src="//haitao.nos.netease.com/3d439da1-354c-4cec-98ee-259cac496b59.svg" width="28px" height="28px" style="margin-right:9px;" />
考拉UI系统
</div>
<kl-sidebar top="48px" menus={menus} bodyEl="j-body" width="200px" />
<div id="j-body" class="demo-body"></div>
</div>
var component = new NEKUI.Component({
template: template,
data: {
menus: [{
title: '首页',
iconClass: 'icon icon-home',
children: [{
title: '商品实时数据',
url: '/',
target: '_blank'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '库存管理',
open: true,
iconClass: 'icon icon-inventory',
children: [{
open: true,
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '财务管理',
iconClass: 'icon icon-financial',
children: [{
title: '对账管理',
url: '/'
},{
title: '请款管理',
url: '/'
}]
}, {
title: '统计数据',
iconClass: 'icon icon-statistics',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '订单管理',
iconClass: 'icon icon-order',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}]
}
});
### 可搜索
<div class="demo-main">
<div class="demo-head">
<img src="//haitao.nos.netease.com/3d439da1-354c-4cec-98ee-259cac496b59.svg" width="28px" height="28px" style="margin-right:9px;" />
考拉UI系统
</div>
<kl-sidebar top="48px" menus={menus} uniqueOpened={true} bodyEl="j-body" width="200px" searchable />
<div id="j-body" class="demo-body"></div>
</div>
var component = new NEKUI.Component({
template: template,
data: {
menus: [{
title: '首页',
iconClass: 'icon icon-home',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '库存管理',
open: true,
iconClass: 'icon icon-inventory',
children: [{
open: true,
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '财务管理',
iconClass: 'icon icon-financial',
children: [{
title: '对账管理',
url: '/'
},{
title: '请款管理',
url: '/'
}]
}, {
title: '统计数据',
iconClass: 'icon icon-statistics',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '订单管理',
iconClass: 'icon icon-order',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}]
}
});

显示待办数量

<div class="demo-main">
<div class="demo-head">
<img src="//haitao.nos.netease.com/3d439da1-354c-4cec-98ee-259cac496b59.svg" width="28px" height="28px" style="margin-right:9px;" />
考拉UI系统
</div>
<kl-sidebar top="48px" menus={menus} uniqueOpened={true} bodyEl="j-body" width="200px" searchable />
<div id="j-body" class="demo-body"></div>
</div>
var component = new NEKUI.Component({
template: template,
data: {
menus: [{
title: '首页',
iconClass: 'icon icon-home',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '库存管理',
open: true,
iconClass: 'icon icon-inventory',
children: [{
open: true,
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '财务管理',
iconClass: 'icon icon-financial',
children: [{
title: '对账管理',
url: '/'
},{
title: '请款管理',
url: '/'
}]
}, {
title: '统计数据',
iconClass: 'icon icon-statistics',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '订单管理',
iconClass: 'icon icon-order',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}]
}
});

主题配置

KLSidebar目前支持light和dark两种主题的配置。

<div class="demo-main">
<div class="demo-head">
<img src="//haitao.nos.netease.com/3d439da1-354c-4cec-98ee-259cac496b59.svg" width="28px" height="28px" style="margin-right:9px;" />
考拉UI系统
</div>
<kl-sidebar top="48px" theme="dark" menus={menus} uniqueOpened={false} bodyEl="j-body" width="200px" />
<div id="j-body" class="demo-body"></div>
</div>
var component = new NEKUI.Component({
template: template,
data: {
menus: [{
title: '首页',
iconClass: 'icon icon-home',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '库存管理',
open: true,
iconClass: 'icon icon-inventory',
children: [{
open: true,
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '财务管理',
iconClass: 'icon icon-financial',
children: [{
title: '对账管理',
url: '/'
},{
title: '请款管理',
url: '/'
}]
}, {
title: '统计数据',
iconClass: 'icon icon-statistics',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}, {
title: '订单管理',
iconClass: 'icon icon-order',
children: [{
title: '商品实时数据',
url: '/'
},{
title: '单据审核',
url: '/'
}]
}]
}
});

API

KLSidebar

KLSidebar

Param Type Default Description
[options.data] object => 绑定属性
[options.data.class] string => 补充class
[options.data.menus] array => 菜单数组
[options.data.top] string "60px" => 菜单style top的值
[options.data.uniqueOpened] boolean true => 是否只保持打开一个菜单
[options.data.titleKey] string "title" => 一级菜单的字段key名
[options.data.urlKey] string "url" => 菜单结构中的链接key名
[options.data.routeKey] string "route" => 单页spa应用时,使用
[options.data.pageKey] string "title" => 二级菜单的字段key名
[options.data.childrenKey] string "children" => 一级菜单对象下二级菜单数组的key名
[options.data.todoKey] string "todos" => 需要显示待办数量时,需要指定key值
[options.data.router] object => 单页应用时, 请将regular-state的manager实例传入
[options.data.width] string => sidebar的宽度设置,默认181px
[options.data.theme] string => sidebar的主题颜色,可选light/dark,默认light
[options.data.scrollIntoView] boolean false => 是否需要scrollIntoView

Name Type Description
menuitem object 点击的menuItem实例