Seven-Bit-UI栅格 Grid
栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。
sb-row 是栅格的行容器，它默认撑满整个容器。
sb-col 是栅格的列容器，你可以配置它的宽度和位置。
基本用法
栅格可以通过 span 配置最基本的 24 等分。
50
50
25
25
25
25
100
栅格偏移
栅格的偏移，你可以使用 offset 设置它相对于当前位置的偏移，偏移是向右的，并且偏移的部分不能填入其他内容，偏移的单位也是 24 等分。
33.3
33.3
栅格排序
指定 push 或者 pull 可以对栅格进行排序,他们将相对向左/右侧移动，移动的单位也是 24 等分。
33.3-1
33.3-2
33.3-3
区块间隔
栅格之间的间距，通过在 row 上配置 gutter 可以增加栅格的区域间隔，它的单位是 px。
💡 说明
这个属性是通过设置内边距来设置间隔的，并不会改变栅栏的原始宽度，你需要在栅栏内填充容器来让他生效
33.3-1
33.3-2
33.3-3
布局方式
同一行栅格之间的水平布局方式，通过在 row 上配置 justify 来实现，它支持 flex 内的大部分属性。
1
2
3
1
2
3
1
2
3
1
2
3
同一行栅格之间的垂直布局方式，通过在 row 上配置 align 来实现，它支持 flex 内的大部分属性。
1
2
3
1
2
3
1
2
3
响应式布局
当屏幕尺寸不同时，可以配置不同的属性组来使得你的栅栏呈现不同的布局样式，预置六种响应尺寸, 分别为 xs, sm, md, lg, xl, xxl。
| 参数名 | 尺寸 |
|---|---|
| xs | ≤ 576px |
| sm | > 576px |
| md | > 768px |
| lg | > 992px |
| xl | > 1200px |
| xxl | > 1600px |
对于每一项尺寸的适配，你需要传入一个对象，可以包含 col 内的所有属性，包括 span、offest、pull、push 等
API
<row> Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| gutter(px) | 内部 col 的内间距 | Number | 0 |
| justify | 内部 col 的水平布局方式 | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | start |
| align | 内部 col 的垂直布局方式 | 'start' | 'center' | 'end' | 'stretch' | start |
<row> Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 放置栅格行容器的内容 | - |
<col> Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| span | 栅格的宽度 | Number(0-24) | 24 |
| offest | 栅格的左外间距 | Number(0-24) | 0 |
| push | 栅格的右偏移 | Number(0-24) | 0 |
| pull | 栅格的左偏移 | Number(0-24) | 0 |
| xs | ≤ 576px 的属性组 | { [key: string]: any } | - |
| sm | > 576px 的属性组 | { [key: string]: any } | - |
| md | > 768px 的属性组 | { [key: string]: any } | - |
| lg | > 992px 的属性组 | { [key: string]: any } | - |
| xl | > 1200px 的属性组 | { [key: string]: any } | - |
| xxl | > 1600px 的属性组 | { [key: string]: any } | - |
<col> Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 放置栅格列容器的内容 | - |