Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

TIP

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的父元素必须是一个 <el-container>

常见页面布局

例子

Container API

Container Attributes

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

Container 插槽

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

Header API

Header Attributes

属性名说明类型默认值
height顶栏高度string60px

Header Slots

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

Aside API

Aside Attributes

属性名说明类型默认值
width侧边栏宽度string300px

Aside Slots

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

Main API

Main Slots

插槽名说明
default自定义默认内容
属性名说明类型默认值
height底栏高度string60px
插槽名说明
default自定义默认内容

源代码

组件 • 文档

贡献者