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 • Style • Docs

Contributors ​