| 1 | ---
|
| 2 | title: Layout
|
| 3 | category: Components
|
| 4 | chinese: 页面布局
|
| 5 | cols: 1
|
| 6 | ---
|
| 7 |
|
| 8 | 提供页面框架性的 Layout 以及基础区块布局，除了 `Layout.Main` 必须以外, 其它的组件在页面中可以按需自由搭配使用。
|
| 9 |
|
| 10 | ## Layout
|
| 11 |
|
| 12 | `import Layout from '@icedesign/layout';`
|
| 13 |
|
| 14 | 页面布局，一个页面有且只能有一个 `Layout` 组件。
|
| 15 |
|
| 16 | ### 参数（props）
|
| 17 |
|
| 18 | | 参数名 | 说明 | 类型 | 默认值 |
|
| 19 | |:---------|:-------------|:--------|:--------|
|
| 20 | | fixable | 开启布局模块滚动跟随模式 | boolean | `false` |
|
| 21 |
|
| 22 | `fixable` 一旦设置为 `true` 则整个页面所有模块都固定高度，内容区域不可滚动。子组件通过 `scrollable` props 使其可滚动，以此实现主体内容滚动，其余模块 fixed 的效果。
|
| 23 |
|
| 24 | ## Layout.Section
|
| 25 |
|
| 26 | 辅助布局组件，会创建 100% 宽度的一整行。当某一块区域需要两个模块左右排列，则需要使用 `Layout.Section` 组件包裹。
|
| 27 |
|
| 28 | 如：
|
| 29 |
|
| 30 | `````html
|
| 31 | <Layout.Section>
|
| 32 | <Layout.Aside />
|
| 33 | <Layout.Main />
|
| 34 | </Layout.Section>
|
| 35 | `````
|
| 36 |
|
| 37 | ### 参数（props）
|
| 38 |
|
| 39 | | 参数名 | 说明 | 类型 | 默认值 |
|
| 40 | |:-----------|:------------------------------------------|:--------|:--------|
|
| 41 | | scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |
|
| 42 |
|
| 43 | ## Layout.Header
|
| 44 |
|
| 45 | 顶部布局，默认内部元素居中对其。
|
| 46 |
|
| 47 | ### 参数（props）
|
| 48 |
|
| 49 | | 参数名 | 说明 | 类型 | 默认值 |
|
| 50 | |:-----------|:--------------|:-------|:---------|
|
| 51 | | alignItems | 内部元素垂直对其方式 | string | `center` |
|
| 52 | | theme | 配置 Header 皮肤色 | string | - |
|
| 53 |
|
| 54 | - alignItems：`flex-start` `flex-end` `center` `baseline` `stretch`
|
| 55 | - theme：`dark, light`
|
| 56 |
|
| 57 | ## Layout.Aside
|
| 58 |
|
| 59 | 侧边栏，根据嵌套顺序，可左右布局。
|
| 60 |
|
| 61 | ### 参数（props）
|
| 62 |
|
| 63 | | 参数名 | 说明 | 类型 | 默认值 |
|
| 64 | |:------|:--------------|:--------------|:------|
|
| 65 | | width | 展开状态下的宽度 | number/string | `200` |
|
| 66 | | theme | 配置 Aside 皮肤色 | string | - |
|
| 67 |
|
| 68 | - theme：`dark, light`
|
| 69 |
|
| 70 | ## Layout.Main
|
| 71 |
|
| 72 | ### 参数（props）
|
| 73 |
|
| 74 | | 参数名 | 说明 | 类型 | 默认值 |
|
| 75 | |:-----------|:------------------------------------------|:--------|:--------|
|
| 76 | | scrollable | 区域可滚动 *(`<Layout fixable={true} />` 下可用)* | boolean | `false` |
|
| 77 |
|
| 78 | 主体内容。
|
| 79 |
|
| 80 | ## Layout.Footer
|
| 81 |
|
| 82 | 页脚布局。
|
| 83 | |
| \ | No newline at end of file |