El Container

Element Plus Container Components

Container components for scaffolding basic structure of the page.

When to Invoke

Invoke this skill when:

• User needs to create a page layout
• User wants to implement header/footer/aside/main sections
• User needs to create admin dashboard layouts
• User asks about responsive layouts
• User needs nested container layouts

Features

• Flex-based Layout: Uses CSS Flexbox for layout
• Automatic Direction: Direction based on child elements
• Nested Support: Multiple levels of nesting
• Customizable Sizes: Configurable header height, aside width
• Responsive: Works with responsive design

Components

Container (el-container)

Wrapper container. When nested with a ` or `, all its child elements will be vertically arranged. Otherwise horizontally.

Header (el-header)

Container for headers.

Aside (el-aside)

Container for side sections (usually a side nav).

Main (el-main)

Container for main sections.

Footer (el-footer)

Container for footers.

API Reference

Container Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | direction | layout direction for child elements | 'horizontal' \| 'vertical' | vertical when nested with el-header or el-footer; horizontal otherwise |

Container Slots

| Name | Description | Subtags | |------|-------------|---------| | default | customize default content | Container / Header / Aside / Main / Footer |

Header Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | height | height of the header | string | 60px |

Header Slots

| Name | Description | |------|-------------| | default | customize default content |

Aside Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | width | width of the side section | string | 300px |

Aside Slots

| Name | Description | |------|-------------| | default | customize default content |

Main Slots

| Name | Description | |------|-------------| | default | customize default content |

Footer Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | height | height of the footer | string | 60px |

Footer Slots

| Name | Description | |------|-------------| | default | customize default content |

Usage Examples

Basic Layout (Header + Main)

  
    Header
    Main
  

.el-header,
.el-main {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  line-height: 160px;
}

Header + Main + Footer

  
    Header
    Main
    Footer
  

Aside + Main

  
    Aside
    Main
  

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

Header + Aside + Main

  
    Header
    
      Aside
      Main
    
  

Header + Aside + Main + Footer

  
    Header
    
      Aside
      
        Main
        Footer
      
    
  

Aside + Header + Main

  
    Aside
    
      Header
      Main
    
  

Aside + Header + Main + Footer

  
    Aside
    
      Header
      Main
      Footer
    
  

Full Dashboard Layout

  
    
      
        
          
          Dashboard
        
        
          
          Users
        
        
          
          Settings
        
      
    
    
    
      
        
          Admin Dashboard
          
            
              
              Admin
            
            
              
                Profile
                Logout
              
            
          
        
      
      
      
        
      
      
      
        © 2024 Your Company
      
    
  

import { ref } from 'vue'
import { HomeFilled, User, Setting } from '@element-plus/icons-vue'

const activeIndex = ref('/dashboard')

.el-header {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-aside {
  background-color: #304156;
}

.el-menu {
  border-right: none;
}

.el-footer {
  background-color: #f5f5f5;
  text-align: center;
}

Common Issues

1. Container Not Filling Screen

Set height on the container:

2. Aside Width Not Changing

Use the width attribute:

Aside

3. Content Overflow

Add overflow styles:

Best Practices

1. Use semantic structure: Follow header-main-footer pattern
2. Set container height: Always set height for full-page layouts
3. Responsive design: Use CSS media queries for responsive layouts
4. Nested containers: Use nested containers for complex layouts
5. Combine with Menu: Use Aside with Menu for navigation

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.