--- title: 左右布局固定侧边栏和头部 order: 3 iframe: 400 --- 给`Header`和`Aside`分别添加`fixed`属性，即可固定顶部或者侧边栏，组件会自动添加相应样式，无需手动添加样式。另外我们可以通过给`Aside`添加`size`属性，来控制侧边栏的宽度，给属性会自动应用到子组件 `Menu`中 ```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 transition all .25s ease-in-out .k-breadcrumb margin 20px 0 .k-aside.k-collapsed .logo margin 17px 5px ``` ```js export default class Demo extends Intact { @Intact.template() static template = template; defaults() { return { expandedKeys: [], selectedKey: '3-1', collapse: false, data: Array.apply(null, {length: 100}), }; } _toggle() { this.set('collapse', !this.get('collapse')); } } ``` ```vue-data data() { return { expandedKeys: [], selectedKey: '3-1', collapse: false, data: Array.apply(null, {length: 100}), }; }, ``` ```react-methods constructor(props) { super(props); this.state = { expandedKeys: [], selectedKey: '3-1', collapse: false, data: Array.apply(null, {length: 100}), }; this._toggle = this._toggle.bind(this); } ``` ```angular-properties private expandedKeys = []; private selectedKey = '3-1'; private collapse = false; private data = Array.apply(null, {length: 100}); ```