title: Layout category: Components chinese: 页面布局 cols: 1
提供页面框架性的 Layout 以及基础区块布局，除了 Layout.Main 必须以外, 其它的组件在页面中可以按需自由搭配使用。
Layout
import Layout from '@icedesign/layout';
页面布局，一个页面有且只能有一个 Layout 组件。
参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| fixable | 开启布局模块滚动跟随模式 | boolean | false |
fixable 一旦设置为 true 则整个页面所有模块都固定高度，内容区域不可滚动。子组件通过 scrollable props 使其可滚动，以此实现主体内容滚动，其余模块 fixed 的效果。
Layout.Section
辅助布局组件，会创建 100% 宽度的一整行。当某一块区域需要两个模块左右排列，则需要使用 Layout.Section 组件包裹。
如：
<Layout.Section>
<Layout.Aside />
<Layout.Main />
</Layout.Section>参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scrollable | 区域可滚动 (<Layout fixable={true} /> 下可用) |
boolean | false |
Layout.Header
顶部布局，默认 flex 布局，并且内部元素垂直居中对齐，可通过 style 属性修改。
参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 配置皮肤色 | string | normal |
- type: none(继承父元素的背景色), normal，primary，secondary
Layout.Aside
侧边栏，根据嵌套顺序，可左右布局。
参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 配置Aside 皮肤色 | string | - |
Layout.Main
参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| scrollable | 区域可滚动 (<Layout fixable={true} /> 下可用) |
boolean | false |
主体内容。
Layout.Footer
页脚布局。
参数（props）
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 配置Aside 皮肤色 | string | - |