--- title: 侧边栏布局 order: 1 --- 侧边栏布局，导航条和侧边栏为左右关系，通常需要展开收起侧边栏，给`Aside`添加`collapse`属性即可控制侧边栏的展开收起状态。组件会自动给侧边栏下的菜单组件`Menu`应用相同的`collapse`属性 ```vdt import {Layout, Header, Aside, Body, Footer} from 'kpc/components/layout'; import {Menu, MenuItem} from 'kpc/components/menu'; import Icon from 'kpc/components/icon'; import {Breadcrumb, BreadcrumbItem} from 'kpc/components/breadcrumb'; import {Button} from 'kpc/components/button';

Home Detail

content

``` ```styl .logo height 30px line-height 30px text-align center color #fff background gray margin 17px 20px .k-breadcrumb margin 20px 0 .k-aside.k-collapsed .logo margin 17px 5px ``` ```js export default class extends Intact { @Intact.template() static template = template; defaults() { return { expandedKeys: [], selectedKey: '3-1', collapse: false, }; } _toggle() { this.set('collapse', !this.get('collapse')); } } ```