行列布局

布局组件分为行组件 </pure-row /> 和列组件 </pure-col /> 。

介绍

Pure Ui 布局组件类似于栅格系统，但是并没有进行 12栅格、24栅格 这样的设计，而是直接使用 0-100 之间的任意数值来表示宽度（百分比）。

行组件

行组件用于包裹列组件，用于定义布局的行。

列间距

行组件的 gap 属性用于定义列之间的间距，可以是字符串或数组 。

数组值

• 如果数组长度为 1，那么列的左右上下间距都为数组中的数值。
• 如果数组长度为 2，那么列的左右间距为数组中的第一个数值，上下间距为数组中的第二个数值。
• 如果数组长度为 >2，那么列的左右间距为数组中的第一个数值，上下间距为数组中的第二个数值，后面的数组元素会被忽略。

字符串值

如果 gap 的值是字符串，那么组件内部会尝试将字符串按空格分割成多个数值，例如：

<pure-row gap="10px">
<pure-row gap="10px 20px">
<pure-row gap="10px 20px 30px">

组件内部最终会转换为: ["10px"]、["10px", "20px"] 和 ["10px", "20px", "30px"] 然后按照上方的数组值规则进行处理。

列组件

列组件用于定义布局的列。

列宽度

通过 span 属性可以定义列的宽度，span 的值为 0-100 之间的任意数值，例如：

提示

列的宽度包含设置的列间距大小。

<template>
	<pure-row gap="10px">
		<pure-col span="50"> 列宽度：50% </pure-col>
		<pure-col span="50"> 列宽度：50% </pure-col>
	</pure-row>

	<pure-row gap="10px">
		<pure-col span="25"> 列宽度：25% </pure-col>
		<pure-col span="50"> 列宽度：50% </pure-col>
		<pure-col span="25"> 列宽度：25% </pure-col>
	</pure-row>
</template>

列偏移量

通过 offset 属性可以定义列的偏移量，offset 的值为 0-100 之间的任意数值，例如：

提示

一个 <pure-row /> 组件中所有列的宽度和偏移量总和不能超过 100，否则会导致超出部分不可见。

<template>
	<pure-row gap="10px">
		<pure-col
			span="50"
			offset="25"
		>
			列宽度：50%，偏移量：25%
		</pure-col>
	</pure-row>
</template>

属性

<pure-row />

名称	类型	默认值	说明
gap	[String, Array]	0px	列间距

<pure-col />

名称	类型	默认值	说明
span	[String, Number]	100	列宽度、占比
offset	[String, Number]	0	列偏移量

插槽

<pure-col />

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

样式变量

<pure-col />

名称	说明
--pure-col-width	列宽度
--pure-col-offset	列偏移量