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自定义默认内容

源代码 ​

组件 • 样式 • 文档

贡献者 ​