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 Attributes

NameDescriptionTypeAccepted ValuesDefault
directionlayout direction for child elementsstringhorizontal / verticalvertical when nested with el-header or el-footer; horizontal otherwise

Container Slots

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

Header Attributes

NameDescriptionTypeAccepted ValuesDefault
heightheight of the headerstring60px

Header Slots

NameDescription
customize default content

Aside Attributes

NameDescriptionTypeAccepted ValuesDefault
widthwidth of the side sectionstring300px

Aside Slots

NameDescription
customize default content

Main Slots

NameDescription
customize default content
NameDescriptionTypeAccepted ValuesDefault
heightheight of the footerstring60px
NameDescription
customize default content

Source

ComponentDocs

Contributors