2022-01-05 17:34:05 +08:00
|
|
|
# Layout <small>布局</small>
|
2022-01-04 11:03:42 +08:00
|
|
|
|
|
|
|
|
:::tip
|
|
|
|
|
`Layout` 组件需要配合 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
|
|
## 示例
|
|
|
|
|
|
|
|
|
|
### 基础布局
|
|
|
|
|
|
|
|
|
|
`Layout` 组件支持多种典型布局。
|
|
|
|
|
|
2022-04-21 23:23:30 +08:00
|
|
|
[[ demo src="/demo/layout/basic.vue" browser="/demos/layout/basic.vue" ]]
|
2022-01-04 11:03:42 +08:00
|
|
|
|
2022-01-14 12:08:26 +08:00
|
|
|
### 通顶侧边栏
|
2022-01-04 11:03:42 +08:00
|
|
|
|
2022-04-21 23:23:30 +08:00
|
|
|
[[ demo src="/demo/layout/global-sidebar.vue" browser="/demos/layout/global-sidebar.vue" ]]
|
2022-01-04 11:03:42 +08:00
|
|
|
|
2022-01-14 12:08:26 +08:00
|
|
|
### 通栏底部
|
2022-01-04 11:03:42 +08:00
|
|
|
|
2022-04-21 23:23:30 +08:00
|
|
|
[[ demo src="/demo/layout/global-footer.vue" browser="/demos/layout/global-footer.vue" ]]
|
2022-01-04 11:03:42 +08:00
|
|
|
|
|
|
|
|
### 吸顶/吸底布局
|
|
|
|
|
|
|
|
|
|
`Header` / `Sidebar` / `Footer` 组件均支持通过 `sticky` 属性设置吸顶/吸底。
|
|
|
|
|
|
2022-01-14 12:08:26 +08:00
|
|
|
:::tip
|
|
|
|
|
当吸顶的布局头部和吸顶侧边栏一起使用需要在布局头部的父组件 `Layout` 上设置 `--dls-layout-header-height` 来指定布局头部的高度。
|
|
|
|
|
:::
|
2022-01-04 11:03:42 +08:00
|
|
|
|
2022-01-14 12:08:26 +08:00
|
|
|
:::tip
|
|
|
|
|
当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
|
|
|
|
|
:::
|
|
|
|
|
|
2022-04-21 23:23:30 +08:00
|
|
|
[[ demo src="/demo/layout/sticky.vue" browser="/demos/layout/sticky.vue" ]]
|
2022-01-04 11:03:42 +08:00
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
### 属性
|
2022-01-14 12:08:26 +08:00
|
|
|
| 名称 | 类型 | 默认值 | 描述 |
|
|
|
|
|
| -- | -- | -- | -- |
|
|
|
|
|
| ``direction`` | `'column' | 'row'` | `'column'` | 布局排列方向。在有 `Sidebar` 时，默认为 `'row'`。 |
|
2022-01-04 11:03:42 +08:00
|
|
|
|
|
|
|
|
### 插槽
|
|
|
|
|
|
|
|
|
|
| 名称 | 描述 |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| ``default`` | 布局内容，可以是 [`Header`](./header) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件或嵌套使用 `Layout` 组件。 |
|
