GovUI

Grid 栅格化 ​

通过基础的 24 分栏，迅速简便地创建布局。

基础布局 ​

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

查看代码
vue
<template>
	<demo-container class="demo-gov-grid-row">
		<gov-row>
			<gov-col :span="24"></gov-col>
		</gov-row>
		<gov-row>
			<gov-col :span="12"></gov-col>
			<gov-col :span="12"></gov-col>
		</gov-row>
		<gov-row>
			<gov-col :span="8"></gov-col>
			<gov-col :span="8"></gov-col>
			<gov-col :span="8"></gov-col>
		</gov-row>
		<gov-row>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
	</demo-container>
</template>

分栏间隔 ​

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

查看代码
vue
<template>
	<demo-container class="demo-gov-grid-row">
		<gov-row :gutter="20">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
	</demo-container>
</template>

混合布局 ​

查看代码
vue
<template>
	<demo-container class="demo-gov-grid-row">
		<gov-row :gutter="20">
			<gov-col :span="16"></gov-col>
			<gov-col :span="8"></gov-col>
		</gov-row>
		<gov-row :gutter="20">
			<gov-col :span="8"></gov-col>
			<gov-col :span="8"></gov-col>
			<gov-col :span="4"></gov-col>
			<gov-col :span="4"></gov-col>
		</gov-row>
		<gov-row :gutter="20">
			<gov-col :span="4"></gov-col>
			<gov-col :span="16"></gov-col>
			<gov-col :span="4"></gov-col>
		</gov-row>
	</demo-container>
</template>

分栏偏移 ​

支持偏移指定的栏数。

查看代码
vue
<template>
	<demo-container class="demo-gov-grid-row">
		<gov-row :gutter="20">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6" :offset="6"></gov-col>
		</gov-row>
		<gov-row :gutter="20">
			<gov-col :span="6" :offset="6"></gov-col>
			<gov-col :span="6" :offset="6"></gov-col>
		</gov-row>
		<gov-row :gutter="20">
			<gov-col :span="12" :offset="6"></gov-col>
		</gov-row>
	</demo-container>
</template>

对齐方式 ​

当设置align属性和 justify 属性，会自动开启 flex 布局模式。

justify 属性可设置为 start, center, end, space-between, space-around

align属性可设置为flex-start, center, flex-end, stretch。

查看代码
vue
<template>
	<demo-container class="demo-gov-grid-row">
		<gov-row>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
		<gov-row justify="center">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
		<gov-row justify="end">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
		<gov-row justify="space-between">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
		<gov-row justify="space-around">
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
			<gov-col :span="6"></gov-col>
		</gov-row>
	</demo-container>
</template>

Row Attributes ​

参数说明类型 / 示例默认值
width行宽度，单位 pxstring | numberauto
gutter栅格间隔，见 Gutter 示例。number | object | array0
wrap是否自动换行booleanfalse
align垂直对齐方式，对应 css 的 align-item 的值stringflex-start
justify水平排列方式,对应 css 的 justify-content 的值stringstart

Gutter 示例 ​

vue
<template>
	<!--示例 1：基本水平间隔-->
	<gov-row :gutter="16"> </gov-row>
	<!--示例 2：响应式水平间隔-->
	<gov-row :gutter="{ xs: 8, sm: 16, md: 24 }"> </gov-row>
	<!--示例 3：水平和垂直间隔-->
	<gov-row :gutter="[16, 24]"> </gov-row>
	<!--示例 4：水平间隔和响应式垂直间隔-->
	<gov-row :gutter="[16, { xs: 8, sm: 16, md: 24 }]"> </gov-row>
	<!--示例 5：响应式水平间隔和垂直间隔-->
	<gov-row :gutter="[{ xs: 8, sm: 16 }, 24]"> </gov-row>
</template>
名称说明类型默认值
xs<576px 响应式栅格numberundefined
sm≥576px 响应式栅格numberundefined
md≥768px 响应式栅格numberundefined
lg≥992px 响应式栅格numberundefined
xl≥1200px 响应式栅格numberundefined
xxl≥1600px 响应式栅格numberundefined

Col Attributes ​

参数说明类型默认值
span栅格占位格数，取 0,1,2...24，为 0 时相当于 display: none，优先级低于 xs, sm, md, lg, xl, xxlnumberundefined
offset栅格左侧的间隔格数，取 0,1,2...24number0
flexflex 布局填充string | numberundefined
order栅格顺序，取 0,1,2...number0
xs<576px 响应式栅格number | {span?: number, offset?: number}undefined
sm≥576px 响应式栅格number | {span?: number, offset?: number}undefined
md≥768px 响应式栅格number | {span?: number, offset?: number}undefined
lg≥992px 响应式栅格number | {span?: number, offset?: number}undefined
xl≥1200px 响应式栅格number | {span?: number, offset?: number}undefined
xxl≥1600px 响应式栅格number | {span?: number, offset?: number}undefined

Released under the MIT License.