布局

介绍

布局组件需要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>

flex布局

通过将属性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>

Col

Props

参数 说明 类型 可选值 默认值
span 列元素宽度 string|number 0
offset 列元素偏移距离 string|number 0

Slots

名称 说明 Bindings
default

Row

Props

参数 说明 类型 可选值 默认值
gutter 列元素之间的间距 string|number 0
type 布局方式 string flex -
justify Flex 主轴对齐方式 string end center space-around space-between start
align Flex 交叉轴对齐方式 string center bottom top

Events

事件名 回调参数 说明
click event object - event 点击事件

Slots

名称 说明 Bindings
default 默认插槽