Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

TIP

以上组件采用了 flex 布局。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的父元素必须是一个 <el-container>

常见的页面布局

Header

Main

Header

Main

Footer

Aside

Main

Header

Aside

Main

Header

Aside

Main

Footer

Aside

Header

Main

Aside

Header

Main

Footer

显示代码

<template>
	<div>
		<div class="container-content container-basic">
			<div>
				<ued-container>
					<ued-header>Header</ued-header>
					<ued-main>Main</ued-main>
				</ued-container>
			</div>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-header>Header</ued-header>
				<ued-main>Main</ued-main>
				<ued-footer>Footer</ued-footer>
			</ued-container>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-aside :width="200">Aside</ued-aside>
				<ued-main>Main</ued-main>
			</ued-container>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-header>Header</ued-header>
				<ued-container>
					<ued-aside :width="200">Aside</ued-aside>
					<ued-main>Main</ued-main>
				</ued-container>
			</ued-container>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-header>Header</ued-header>
				<ued-container>
					<ued-aside :width="200">Aside</ued-aside>
					<ued-container>
						<ued-main>Main</ued-main>
						<ued-footer>Footer</ued-footer>
					</ued-container>
				</ued-container>
			</ued-container>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-aside :width="200">Aside</ued-aside>
				<ued-container>
					<ued-header>Header</ued-header>
					<ued-main>Main</ued-main>
				</ued-container>
			</ued-container>
		</div>
		<div class="container-content container-basic">
			<ued-container>
				<ued-aside :width="200">Aside</ued-aside>
				<ued-container>
					<ued-header>Header</ued-header>
					<ued-main>Main</ued-main>
					<ued-footer>Footer</ued-footer>
				</ued-container>
			</ued-container>
		</div>
	</div>
</template>

Container API

属性

属性名	说明	类型	默认值
direction	子元素的排列方向	horizontal/vertical	子元素中有 el-header 或 el-footer 时为 vertical，否则为 horizontal-

插槽

插槽名	说明	子标签
defalut	自定义默认内容	Container / Header / Aside / Main / Footer

Header API

属性

属性名	说明	类型	默认值
height	顶栏高度	string/number	60px

插槽

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

Aside API

属性

属性名	说明	类型	默认值
width	侧边栏宽度	string/number	300px

插槽

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

Main API

插槽

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

Footer API

属性

属性名	说明	类型	默认值
height	顶栏高度	string/number	60px

插槽

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