# Grid 栅格
提供了hips-row和hips-col两个组件来进行 行列布局
# 使用指南
import Row from '@hips/uni-ui/lib/row';
import Col from '@hips/uni-ui/lib/col';
export default {
components: {
'hips-row': Row,
'hips-col': Col,
},
};
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 跨平台支持
| 微信小程序 | 支付宝小程序 | 钉钉小程序 | 百度小程序 | 头条小程序 | QQ 小程序 |
|---|---|---|---|---|---|
| ✔️ | - | - | - | - | - |
# 代码演示
# 基本用法
Grid 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比
<hips-row>
<hips-col span="8">span: 8</hips-col>
<hips-col span="8">span: 8</hips-col>
<hips-col span="8">span: 8</hips-col>
</hips-row>
1
2
3
4
5
2
3
4
5
# 设置列元素间距
通过gutter属性可以设置列元素之间的间距，默认间距为 0
<hips-row gutter="20">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
1
2
3
4
5
6
2
3
4
5
6
# 设置列元素偏移值
添加offset属性可以设置列的偏移宽度，计算方式与 span 相同
<hips-row>
<hips-col span="6">span: 6</hips-col>
<hips-col span="8" offset="6">offset: 6, span: 8</hips-col>
</hips-row>
1
2
3
4
2
3
4
# Flex 布局
将 type 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
<!-- 左对齐 -->
<hips-row type="flex">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
<!-- 居中 -->
<hips-row type="flex" justify="center">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
<!-- 右对齐 -->
<hips-row type="flex" justify="end">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
<!-- 两端对齐 -->
<hips-row type="flex" justify="space-between">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
<!-- 每个元素的两侧间隔相等 -->
<hips-row type="flex" justify="space-around">
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
<hips-col span="6">span: 6</hips-col>
</hips-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# API
# Row
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 布局方式，可选值为 flex | String | - |
| gutter | 列元素之间的间距（单位为 px） | String | Number | - |
| justify | Flex 主轴对齐方式，可选值为 end/center/space-around/space-between | String | start |
| align | Flex 交叉轴对齐方式，可选值为 center/bottom | String | top |
# Col
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 列元素宽度(0-24) | String | Number | - |
| offset | 列元素偏移距离 | String | Number | - |
# Slots
# Row
| 名称 | 说明 |
|---|---|
| - | 用于放置 hips-col 组件 |
# Col
| 名称 | 说明 |
|---|---|
| - | col 组件内容 |