行列布局

用于快速创建行列布局。该组件只提供布局，不提供样式。

• pure-row - 行，其子元素只能为 pure-col
• pure-col - 列，必须放在 pure-row 中

属性

pure-row

名称	类型	默认值	说明
gap	[String, Array]	0px	子元素的间距，同 css 的 flex-gap 属性

pure-col

名称	类型	默认值	说明
span	[String, Number]	100	[详情] 子元素所占的份数（百分比）
offset	[String, Number]	0	[详情] 子元素的偏移量（百分比）

份数

通过 span 属性来设置子元素所占的份数（百分比）。
每行的总份数为 100，如果子元素的 span 总和大于 100，则超出部分会换行显示。

<template>
	<pure-row gap="5px">
		<pure-col span="20">
			<view class="content">20</view>
		</pure-col>
		<pure-col span="30">
			<view class="content">30</view>
		</pure-col>
		<pure-col span="40">
			<view class="content">40</view>
		</pure-col>
		<!-- 这一个会换行显示 -->
		<pure-col span="50">
			<view class="content">50</view>
		</pure-col>
	</pure-row>
</template>

偏移量

通过 offset 属性来设置子元素的偏移量（百分比）。
默认，偏移量可以设置成 >=0 的任意值，但是，如果每行的 偏移量总和 + 份数总和 > 100，由于组件内部使用 margin 来实现偏移量，所以会导致元素超出父元素，不可见。

<template>
	<pure-row gap="5px">
		<pure-col span="20" offset="20">
			<view class="content">:-:</view>
		</pure-col>
		<pure-col span="30" offset="30">
			<view class="content">:-:</view>
		</pure-col>

		<!-- 前面两个元素的 span + offset 正好为 100，所以这个元素会换行显示 -->
		<pure-col span="40" offset="40">
			<view class="content">:-:</view>
		</pure-col>

		<!-- 
		 * 由于上一个元素的 span + offset 为 80，
		 * 故此行正好还可以放下一个 span 最大为 20 的元素，
		 * 但是该元素由设置了 20 的偏移量，
		 * 导致，元素溢出父元素，不可见 
		-->
		<pure-col span="20" offset="20">
			<view class="content">:-:</view>
		</pure-col>
	</pure-row>
</template>

事件

pure-col

名称	参数	说明
@onClick	-	点击时触发

插槽

pure-col

名称	参数	说明
#default	-	默认，内容