Container

Container components for scaffolding basic structure of the page:

<el-container>: wrapper container. When nested with a <el-header> or <el-footer>, all its child elements will be vertically arranged. Otherwise horizontally.

<el-header>: container for headers.

<el-aside>: container for side sections (usually a side nav).

<el-main>: container for main sections.

<el-footer>: container for footers.

TIP

These components use flex for layout, so please make sure your browser supports it. Besides, <el-container>'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a <el-container>.

Common layouts

Example

Container API

Container Attributes

NameDescriptionTypeDefault
directionlayout direction for child elementsenumvertical when nested with el-header or el-footer; horizontal otherwise

Container Slots

NameDescriptionSubtags
defaultcustomize default contentContainer / Header / Aside / Main / Footer

Header API

Header Attributes

NameDescriptionTypeDefault
heightheight of the headerstring60px

Header Slots

NameDescription
defaultcustomize default content

Aside API

Aside Attributes

NameDescriptionTypeDefault
widthwidth of the side sectionstring300px

Aside Slots

NameDescription
defaultcustomize default content

Main API

Main Slots

NameDescription
defaultcustomize default content
NameDescriptionTypeDefault
heightheight of the footerstring60px
NameDescription
defaultcustomize default content

Source

Component • Docs

Contributors