概述
Layout：布局容器，其下可嵌套HeaderSiderContentFooter或Layout本身，可以放在任何父容器中。Header：顶部布局，其下可嵌套任何元素，只能放在Layout中。Sider：侧边栏，其下可嵌套任何元素，只能放在Layout中。Content：内容部分，其下可嵌套任何元素，只能放在Layout中。Footer：底部布局，其下可嵌套任何元素，只能放在Layout中。
注意事项
1、布局组件采用 Flex 布局实现，无法在非现代浏览器中工作
2、Layout 组件仅会帮你实现布局，但不会附带背景色、文本色、宽高度等样式。你可以根据自己实际需求传入 style 或给定特定 className 另行编写css实现
2、Layout 组件仅会帮你实现布局，但不会附带背景色、文本色、宽高度等样式。你可以根据自己实际需求传入 style 或给定特定 className 另行编写css实现
代码演示
如何引入
三行布局
左侧边栏布局
右侧边栏布局
侧边栏布局
响应式布局
侧边栏预设了六个响应尺寸：
xs、sm、md、lg、xl、xxl。可以通过设置 breakpoint 属性设置断点，通过 onBreakpoint 调用回调函数。布局示例
顶部导航布局
顶部导航-侧边布局
侧边导航
API 参考
Layout
Layout.HeaderLayout.FooterLayout.ContentAPI 与Layout相同
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| className | 类名 | string | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
| style | 样式 | CSSProperties | - |
| aria-label | aria-label 属性，用来给当前元素加上的标签描述, 提升可访问性 >=2.3.0 | string | - |
| role | role 属性, 提升可访问性 >=2.3.0 | string | - |
Layout.Sider
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| breakpoint | 触发响应式布局的断点，可选值'xs', 'sm', 'md', 'lg', 'xl', 'xxl' | string[] | - |
| className | 类名 | string | - |
| style | 样式 | CSSProperties | - |
| onBreakpoint | 触发响应式布局断点时的回调 | (screen: string, broken: bool) => void | - |
| aria-label | aria-label属性，用来给当前元素加上的标签描述, 提升可访问性 >=2.3.0 | string | - |
| role | role属性, 提升可访问性 >=2.3.0 | string | - |
responsive map
Accessibility
ARIA
- Sider 可传入 aria-label props，描述该 Sider 作用。
- Header Content Main Footer 可传入 role aria-label 描述对应元素作用。
