ant-design-vue/components/layout/index.zh-CN.md

62 lines
1.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

## API
```jsx
<Layout>
<Header>header</Header>
<Layout>
<Sider>left sidebar</Sider>
<Content>main content</Content>
<Sider>right sidebar</Sider>
</Layout>
<Footer>footer</Footer>
</Layout>
```
### Layout
布局容器。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| class | 容器 class | string | - |
| style | 指定样式 | object | - |
| hasSider | 表示子元素里有 Sider一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
### Layout.Sider
侧边栏。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| class | 容器 class | string | - |
| collapsed(v-model) | 当前收起状态 | boolean | - |
| collapsedWidth | 收缩宽度,设置为 0 会出现特殊 trigger | number | 64 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向,当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object\|string | - |
| trigger | 自定义 trigger设置为 null 时隐藏 trigger | string\|slot | - |
| width | 宽度 | number\|string | 200 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| collapse | 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} |
#### breakpoint width
```js
{
xs: '480px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1600px',
}
```