docs: add docs for layout (#18)

Co-authored-by: GU Yiling <justice360@gmail.com>

one/docs/components/content.md

@@ -0,0 +1,15 @@
+# Content <small>布局内容</small>
+
+:::tip
+`Content` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Sidebar`](./sidebar) 组件使用。
+:::
+
+## 示例
+
+见 [`Layout` 示例](./layout#示例)。
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 布局内容。 |

one/docs/components/footer.md

@@ -0,0 +1,22 @@
+# Footer <small>布局底部</small>
+
+:::tip
+`Footer` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Sidebar`](./sidebar) / [`Content`](./content) 组件使用。
+:::
+
+## 示例
+
+见 [`Layout` 示例](./layout#示例)。
+
+## API
+
+### 属性
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 布局底部的内容。 |

one/docs/components/header.md

@@ -0,0 +1,22 @@
+# Header <small>布局头部</small>
+
+:::tip
+`Header` 组件需要配合 [`Layout`](./layout) / [`Sidebar`](./sidebar) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
+:::
+
+## 示例
+
+见 [`Layout` 示例](./layout#示例)。
+
+## API
+
+### 属性
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 布局头部的内容。 |

one/docs/components/layout.md

@@ -10,31 +10,36 @@
 
 `Layout` 组件支持多种典型布局。
 
-// TBD
+[[ demo src="/demo/layout/basic.vue" ]]
 
-<!-- [[ demo src="/demo/layout/basic.vue" ]] -->
+### 通顶侧边栏
 
-### 收起侧边栏
+[[ demo src="/demo/layout/global-sidebar.vue" ]]
 
-`Sidebar` 组件通过 [`collapse-mode`](./Sidebar#props-collapse-mode) 属性支持两种收起模式，分别是 `slim`（部分收起）/`hidden`（完全收起）。
+### 通栏底部
 
-// TBD
-
-<!-- [[ demo src="/demo/layout/sidebar.vue" ]] -->
+[[ demo src="/demo/layout/global-footer.vue" ]]
 
 ### 吸顶/吸底布局
 
 `Header` / `Sidebar` / `Footer` 组件均支持通过 `sticky` 属性设置吸顶/吸底。
 
-// TBD
+:::tip
+当吸顶的布局头部和吸顶侧边栏一起使用需要在布局头部的父组件 `Layout` 上设置 `--dls-layout-header-height` 来指定布局头部的高度。
+:::
 
-<!-- [[ demo src="/demo/layout/sticky.vue" ]] -->
+:::tip
+当吸底的布局底部和吸顶侧边栏一起使用需要在布局底部的父组件 `Layout` 上设置 `--dls-layout-footer-height` 来指定布局底部的高度。
+:::
+
+[[ demo src="/demo/layout/sticky.vue" ]]
 
 ## API
 
 ### 属性
-
-// TBD
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``direction`` | `'column' | 'row'` | `'column'` | 布局排列方向。在有 `Sidebar` 时，默认为 `'row'`。 |
 
 ### 插槽
 

one/docs/components/sidebar.md

@@ -0,0 +1,44 @@
+# Sidebar <small>布局侧边栏</small>
+
+:::tip
+`Sidebar` 组件需要配合 [`Layout`](./layout) / [`Header`](./header) / [`Footer`](./footer) / [`Content`](./content) 组件使用。
+:::
+
+## 示例
+
+### 收起侧边栏
+
+通过 [`collapse-mode`](#props-collapse-mode) 属性指定收起模式，分别是 `slim`（部分收起） / `hidden`（完全收起）。
+
+[[ demo src="/demo/sidebar/collapse-mode.vue" ]]
+
+### 展示/隐藏切换按钮
+
+使用 `collapsible` 属性设置是否显示侧边栏展开/收起按钮。
+
+[[ demo src="/demo/sidebar/collapsible.vue" ]]
+
+## API
+
+### 属性
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| ``sticky`` | `boolean` | `false` | 是否吸顶。使用注意参考[`吸顶/吸底布局`](./layout#吸顶吸底布局)。 |
+| ``collapsible`` | `boolean` | `false` | 是否显示收起/展开按钮。 |
+| ``collapsed`` | `boolean` | `false` | [^collapsed] |
+| ``autocollapse`` | `boolean` | `false` | 是否拉伸窗口到一定阈值时自动收起。 |
+| ``collapse-mode`` | `'slim' | 'hidden'` | `'slim'` | 收起模式，分别是 `slim`（部分收起）/`hidden`（完全收起）。 
+
+^^^collapsed
+:::badges
+`.sync`
+:::
+
+收起/展开的状态。
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| ``default`` | 布局侧边栏的内容。 |