Container

Componentes contenedores para iniciar una estructura básica de una página:

<el-container>: contenedor envoltorio. Cuando se anidan con un <el-header> o <el-footer>, todos sus elementos hijos estarán dispuestos verticalmente. De lo contrario horizontalmente.

<el-header>: contenedor para encabezados.

<el-aside>: Contenedor para secciones laterales (generalmente, una barra lateral).

<el-main>: contenedor para secciones principales.

<el-footer>: contenedor para pie de página.

TIP

Estos componentes usan flex para el diseño, así que por favor asegúrese de que su navegador lo soporta. Además, los elementos secundarios directos de <el-container>tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de estos últimos cuatro componentes debe ser un <el-container>.

Diseños comunes

Header

Main

Header

Main

Header

Main

Header

Main

Header

Main

Header

Main

Ejemplo

vue

<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>Navigator One
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>Navigator Two
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>Navigator Three
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>

API del Contenedor

Atributos del contenedor

Nombre	Descripción	Tipo	Por defecto
direction	dirección de diseño para elementos secundarios	`enum`	vertical when nested with `el-header` or `el-footer`; horizontal otherwise

Slots del contenedor

Nombre	Descripción	Subtags
default	personaliza el contenido por defecto	Container / Header / Aside / Main / Footer

API de cabecera

Atributos de cabecera

Nombre	Descripción	Tipo	Por defecto
height	altura del encabezado	`string`	60px

Slots del encabezado

Nombre	Descripción
default	personaliza el contenido por defecto

Aside API

Atributos de la sección lateral

Nombre	Descripción	Tipo	Por defecto
width	ancho de la sección lateral	`string`	300px

Slots de la sección lateral

Nombre	Descripción
default	personaliza el contenido por defecto

Main API

Slots de la sección principal

Nombre	Descripción
default	personaliza el contenido por defecto

Atributos de pie de página

Nombre	Descripción	Tipo	Por defecto
height	altura del pie de página	`string`	60px

Slots del pie de página

Nombre	Descripción
default	personaliza el contenido por defecto

Fuente

Componentes • Style • Documentación

Contribuidores

Container ​

Diseños comunes ​

Ejemplo ​

API del Contenedor ​

Atributos del contenedor ​

Slots del contenedor ​

API de cabecera ​

Atributos de cabecera ​

Slots del encabezado ​

Aside API ​

Atributos de la sección lateral ​

Slots de la sección lateral ​

Main API ​

Slots de la sección principal ​

API de Footer ​

Atributos de pie de página ​

Slots del pie de página ​

Fuente ​

Contribuidores ​

Container

Diseños comunes

Ejemplo

API del Contenedor

Atributos del contenedor

Slots del contenedor

API de cabecera

Atributos de cabecera

Slots del encabezado

Aside API

Atributos de la sección lateral

Slots de la sección lateral

Main API

Slots de la sección principal

API de Footer

Atributos de pie de página

Slots del pie de página

Fuente

Contribuidores