Container 布局容器

用于布局的容器组件，基于flex布局，方便快速搭建平台基本结构。

布局一

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-header>Header</gov-header>
			<gov-main>Main</gov-main>
		</gov-container>
	</demo-container>
</template>

布局二

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-header>Header</gov-header>
			<gov-main>Main</gov-main>
			<gov-footer>Footer</gov-footer>
		</gov-container>
	</demo-container>
</template>

布局三

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-aside width="200px">Aside</gov-aside>
			<gov-main>Main</gov-main>
		</gov-container>
	</demo-container>
</template>

布局四

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-header>Header</gov-header>
			<gov-container>
				<gov-aside width="200px">Aside</gov-aside>
				<gov-main>Main</gov-main>
			</gov-container>
		</gov-container>
	</demo-container>
</template>

布局五

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-header>Header</gov-header>
			<gov-container>
				<gov-aside width="200px">Aside</gov-aside>
				<gov-container>
					<gov-main>Main</gov-main>
					<gov-footer>Footer</gov-footer>
				</gov-container>
			</gov-container>
		</gov-container>
	</demo-container>
</template>

布局六

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-aside width="200px">Aside</gov-aside>
			<gov-container>
				<gov-header>Header</gov-header>
				<gov-main>Main</gov-main>
			</gov-container>
		</gov-container>
	</demo-container>
</template>

布局七

查看代码

<template>
	<demo-container class="demo-gov-container">
		<gov-container>
			<gov-aside width="200px">Aside</gov-aside>
			<gov-container>
				<gov-header>Header</gov-header>
				<gov-main>Main</gov-main>
				<gov-footer>Footer</gov-footer>
			</gov-container>
		</gov-container>
	</demo-container>
</template>

Attributes / Slots

以下几种布局组件提供名称为 default 的默认插槽，用于自定义内容。

组件	Attributes	默认值	组件说明
gov-container	-	-	布局容器组件，直接子元素必须是其它四个组件中的一个或多个
gov-header	height	60px	布局头部组件。
gov-aside	width	200px	布局侧边组件。
gov-main	-	-	布局主要内容区域组件。
gov-footer	height	60px	布局底部组件。