Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
基础布局
使用列创建基础网格布局。
通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。
分栏间隔
支持列间距。
行提供 gutter 属性来指定列之间的间距,其默认值为0。
混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
列偏移
可以指定列偏移量。
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
对齐方式
默认使用 flex 布局来对分栏进行灵活的对齐。
可以通过justify 属性来定义子元素的排版方式,其取值为start
、center
、end
、space-between
、space-around
或space-evenly
。
Row API
Row Slots
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
gutter | 栅格间隔 | number | 0 |
justify | flex 布局下的水平排列方式 | start center end space-between space-around space-evenly | start |
Row Slots
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义默认内容 | Col |
Col API
Col Attributes
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | 栅格占据的列数 | number | 24 |
offset | 栅格左侧的间隔格数 | number | 0 |
Col Slots
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |