布局组件需要z-col
,z-row
两个组件搭配使用。在考虑兼容多端的情况下,更推荐使用flex布局。
span
属性控制所占的宽度百分比。offset
属性用来控制偏移的宽度。
<z-row>
<z-col span="8">span: 8</z-col>
<z-col span="8">span: 8</z-col>
<z-col span="8">span: 8</z-col>
</z-row>
<z-row>
<z-col span="4">span: 4</z-col>
<z-col span="10" offset="4">
offset: 4, span: 10
</z-col>
</z-row>
<z-row>
<z-col offset="12" span="12">
offset: 12, span: 12
</z-col>
</z-row>
通过gutter
属性来设置元素之间的间距。
<z-row gutter="80">
<z-col span="8">span: 8</z-col>
<z-col span="8">span: 8</z-col>
<z-col span="8">span: 8</z-col>
</z-row>
<z-row gutter="50">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
通过将属性type
设置为flex
即可开启flex布局。通过justify
属性可以设置对齐方式。
兼容性提示:字节小程序不支持开启flex布局。
<z-row type="flex">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="center">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="end">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="space-between">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
<z-row type="flex" justify="space-around">
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
<z-col span="6">span: 6</z-col>
</z-row>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
span | 列元素宽度 | string|number | 0 |
|
offset | 列元素偏移距离 | string|number | 0 |
名称 | 说明 | Bindings |
---|---|---|
default |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
gutter | 列元素之间的间距 | string|number | 0 |
|
type | 布局方式 | string | flex |
- |
justify | Flex 主轴对齐方式 | string | end center space-around space-between |
start |
align | Flex 交叉轴对齐方式 | string | center bottom |
top |
事件名 | 回调参数 | 说明 |
---|---|---|
click | event object - event |
点击事件 |
名称 | 说明 | Bindings |
---|---|---|
default | 默认插槽 |