Layout

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

TIP

组件默认使用 Flex 布局，不需要手动设置 type="flex"。 请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

基础布局

使用列创建基础网格布局。

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

显示代码

<template>
	<div class="layout-content layout-basic">
		<ued-row>
			<ued-col :span="24">
				<div class="grid-content" />
			</ued-col>
		</ued-row>
		<ued-row>
			<ued-col :span="12">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="12">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row>
			<ued-col :span="8">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="8">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="8">
				<div class="grid-content" />
			</ued-col>
		</ued-row>
		<ued-row>
			<ued-col :span="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row>
			<ued-col :span="4">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

分栏间隔

支持列间距。

行提供 gutter 属性来指定列之间的间距，其默认值为0。

显示代码

<template>
	<div class="layout-content layout-gutter">
		<ued-row :gutter="20">
			<ued-col :span="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

显示代码

<template>
	<div class="layout-content layout-mixin">
		<ued-row :gutter="20">
			<ued-col :span="16">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="8">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="20">
			<ued-col :span="8">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="8">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="20">
			<ued-col :span="4">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="16">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :span="4">
				<div class="grid-content" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

列偏移

您可以指定列偏移量。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

显示代码

<template>
	<div class="layout-content layout-offet">
		<ued-row :gutter="20">
			<ued-col :span="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6" :offset="6">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="20">
			<ued-col :span="6" :offset="6">
				<div class="grid-content" />
			</ued-col>
			<ued-col :span="6" :offset="6">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="20">
			<ued-col :span="12" :offset="6">
				<div class="grid-content" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

对齐方式

默认使用 flex 布局来对分栏进行灵活的对齐。

您可以通过justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。

显示代码

<template>
	<div class="layout-content">
		<div class="layout-justify">
			<ued-row>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
			<ued-row justify="center">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
			<ued-row justify="end">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
			<ued-row justify="space-between">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
			<ued-row justify="space-arround">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
			<ued-row justify="space-evenly">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
		</div>
		<div class="layout-align">
			<ued-row align="top">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
		</div>
		<div class="layout-align">
			<ued-row align="center">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
		</div>
		<div class="layout-align">
			<ued-row align="bottom">
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content-light" />
				</ued-col>
				<ued-col :span="6">
					<div class="grid-content" />
				</ued-col>
			</ued-row>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}

.layout-align {
	& > .ued-row {
		height: 80px;
		border: 1px solid #e4e7ed;
	}
}
</style>

左右移动

通过制定 col 组件的 pull push 属性可以控制栅格左右移动格数。

显示代码

<template>
	<div class="layout-content layout-push-pull">
		<ued-row :gutter="20">
			<ued-col :span="6" :pull="6">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="20">
			<ued-col :span="6" :offset="18" :push="6">
				<div class="grid-content" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

显示代码

<template>
	<div class="layout-content layout-bootstrap">
		<ued-row :gutter="10">
			<ued-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
				<div class="grid-content" />
			</ued-col>
			<ued-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
				<div class="grid-content" />
			</ued-col>
			<ued-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
		<ued-row :gutter="10">
			<ued-col :xs="{ span: 8 }" :sm="6" :md="4" :lg="3" :xl="1">
				<div class="grid-content" />
			</ued-col>
			<ued-col :xs="{ span: 4 }" :sm="6" :md="8" :lg="9" :xl="11">
				<div class="grid-content-light" />
			</ued-col>
			<ued-col :xs="{ span: 4 }" :sm="6" :md="8" :lg="9" :xl="11">
				<div class="grid-content" />
			</ued-col>
			<ued-col :xs="{ span: 8 }" :sm="6" :md="4" :lg="3" :xl="1">
				<div class="grid-content-light" />
			</ued-col>
		</ued-row>
	</div>
</template>

<style lang="scss" scoped>
.ued-row {
	margin-bottom: 20px;
	&:last-child {
		margin-bottom: 0;
	}
}
.ued-col {
	border-radius: 4px;
}

.grid-content {
	border-radius: 4px;
	min-height: 36px;
	background-color: var(--ued-color-primary-light-7);
	&-light {
		border-radius: 4px;
		min-height: 36px;
		background-color: var(--ued-color-primary-light-5);
	}
}
</style>

RowAPI

属性

属性名	说明	类型	默认值
gutter	栅格间隔	number	0
justify	flex 布局下的水平排列方式	start/end/center/space-around/space-between/ space-evenly	start
align	flex 布局下的垂直排列方式	top/middle/bottom	-
tag	自定义元素标签	string/Component	div

插槽

插槽名	说明
defalut	自定义默认内容

ColAPI

属性

属性名	说明	类型	默认值
span	栅格占据的列数	number	24
offset	栅格左侧的间隔格数	number	0
push	栅格向右移动格数	number	0
pull	栅格向左移动格数	number	0
xs	<768px 响应式栅格数或者栅格属性对象	number/Object{span?: number, offset?: number, pull?: number, push?: number}	-
sm	≥768px 响应式栅格数或者栅格属性对象	number/Object{span?: number, offset?: number, pull?: number, push?: number}	-
md	≥992px 响应式栅格数或者栅格属性对象	number/Object{span?: number, offset?: number, pull?: number, push?: number}	-
lg	≥1200px 响应式栅格数或者栅格属性对象	number/Object{span?: number, offset?: number, pull?: number, push?: number}	-
xl	≥1920px 响应式栅格数或者栅格属性对象	number/Object{span?: number, offset?: number, pull?: number, push?: number}	-
tag	自定义元素标签	string/Component	div

插槽

插槽名	说明
defalut	自定义默认内容