菜单栏 KLSidebar

基本形式

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


<div class="demo-main">
    <div class="demo-head">
        <img src="//kaola-haitao.oss.kaolacdn.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="//kaola-haitao.oss.kaolacdn.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="//kaola-haitao.oss.kaolacdn.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="//kaola-haitao.oss.kaolacdn.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

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

menuitem-click 选择某一页时触发Event

Name	Type	Description
menuitem	`object`	点击的menuItem实例