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