布局容器的思想源于实现项目中布局时的经验积累，当我们用原生的 html 与 css 来还原设计稿时首先要从结构上开始，其实就是对元素的 class 命名，我们发现大多数区块基本都可以用 header、content、footer来表示。两个框架中的布局也是由 Layout(Container)、Header、Sider(Aside)、Content(Main)、Footer组成的。
属性
布局容器、内容、边栏的组件名在两个框架中定义的名称不一样，这里我们以 Ant Design 为基准来对比。
Layout
| Antd | Element | 说明 |
|---|---|---|
| className | — | 容器 className |
| — | direction | 子元素的排列方向 |
| hasSider | — | 表示子元素里有 Sider，一般不用指定。 |
| style | — | 指定样式 |
Header
| Antd | Element | 说明 |
|---|---|---|
| — | height | 顶栏高度 |
Aside
| Antd | Element | 说明 |
|---|---|---|
| breakpoint | — | 触发响应式布局的断点 |
| className | — | 容器 className |
| collapsed | — | 当前收起状态 |
| collapsedWidth | — | 收缩宽度，设置为 0 会出现特殊 trigger |
| collapsible | — | 是否可收起 |
| defaultCollapsed | — | 是否默认收起 |
| reverseArrow | — | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 |
| style | — | 指定样式 |
| theme | — | 主题颜色 |
| trigger | — | 自定义 trigger，设置为 null 时隐藏 trigger |
| width | width | 宽度 |
| zeroWidthTriggerStyle | — | 指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式 |
| onBreakpoint | — | 触发响应式布局断点时的回调 |
| onCollapse | — | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 |
Footer
| Antd | Element | 说明 |
|---|---|---|
| — | height | 底栏高度 |
小结
Ant Design 框架对 Aside 的封装更多一些，两个框架对于布局的封装思路基本上是一样的，这也是常见布局中的结构划分方式。
参考链接：
发表回复