布局容器 KLLayout

基本形式-1

用于页面的布局的容器，关于布局定义了以下组件： <kl-layout> 布局容器,<kl-main> 主页面, <kl-aside> 侧边栏, <kl-header> 头部, <kl-footer> 尾部。

<kl-layout>
    <kl-header>Header</kl-header>
    <kl-main>Main</kl-main>
    <kl-footer>Footer</kl-footer>
</kl-layout>

基本形式-2

<kl-layout>
    <kl-header>Header</kl-header>
    <kl-layout>
        <kl-aside>Aside</kl-aside>
        <kl-main isMaster={true}>Main</kl-main>
    </kl-layout>
</kl-layout>

基本形式-3

<kl-layout>
    <kl-aside>Aside</kl-aside>
    <kl-layout isMaster={true}>
        <kl-header>Header</kl-header>
        <kl-main>Main</kl-main>
        <kl-footer>Footer</kl-footer>
    </kl-layout>
</kl-layout>

项目样例

<kl-layout>
    <kl-header>Header</kl-header>
    <kl-layout>
        <kl-aside>
            <kl-sidebar top="0px" menus={menus} uniqueOpened={false} width="200px" />
        </kl-aside>
        <kl-main isMaster={true}>Main</kl-main>
    </kl-layout>
</kl-layout>

var component = new NEKUI.Component({
    template: template,
    data: {
      menus: [{
       title: '首页',
       iconClass: 'icon icon-home'
      }, {
       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'
     }, {
        title: '订单管理',
        iconClass: 'icon icon-order'
     }, {
        title: '消息管理',
        iconClass: 'icon icon-message'
     }]
   }
});

API

KLLayout

Param	Type	Description
[options.direction]	`string`	=> 子元素排列方向，可选为horizontal/vertical
[options.isMaster]	`boolean`	=> 是否为主内容页面，与KLAside的showFold配合使用
[options.class]	`string`	=> class样式

KLHeader

Param	Type	Description
[options.height]	`string`	=> 头部高度
[options.class]	`string`	=> class样式

KLFooter

Param	Type	Description
[options.height]	`string`	=> 底部高度
[options.class]	`string`	=> class样式

KLAside

Param	Type	Description
[options.width]	`string`	=> 侧栏宽度
[options.showFold]	`boolean`	=> 是否开启折叠功能，默认true
[options.active]	`boolean`	=> 若开启折叠功能，初始展开状态，默认true
[options.class]	`string`	=> class样式

KLMain

Param	Type	Description
[options.isMaster]	`boolean`	=> 是否为主内容页面，与KLAside的showFold配合使用
[options.class]	`string`	=> class样式