Container components for scaffolding basic structure of the page:
## Contenedor
Componentes contenedores para iniciar una estructura básica de un sitio:
`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.
De lo contrario, de forma horizontal.
`<el-header>`: container for headers.
`<el-header>`: Contenedor para cabeceras.
`<el-aside>`: container for side sections (usually a side nav).
`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
`<el-main>`: container for main sections.
`<el-main>`: Contenedor para sección principal.
`<el-footer>`: container for footers.
`<el-footer>`: Contenedor para pie de página.
:::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>`.
Estos componentes utilizan flex para el diseño, así que asegúrate que el navegador lo soporte. Además, los elementos directos de `<el-container>` tienen que
ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
:::
### Common layouts
### Diseños comunes
::: demo
```html
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
<el-container>
<el-asidewidth="200px">Aside</el-aside>
<el-main>Main</el-main>
<el-asidewidth="200px">Barra lateral</el-aside>
<el-main>Principal</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-header>Cabecera</el-header>
<el-container>
<el-asidewidth="200px">Aside</el-aside>
<el-main>Main</el-main>
<el-asidewidth="200px">Barra lateral</el-aside>
<el-main>Principal</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-header>Cabecera</el-header>
<el-container>
<el-asidewidth="200px">Aside</el-aside>
<el-asidewidth="200px">Barra lateral</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-asidewidth="200px">Aside</el-aside>
<el-asidewidth="200px">Barra lateral</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
</el-container>
</el-container>
<el-container>
<el-asidewidth="200px">Aside</el-aside>
<el-asidewidth="200px">Barra lateral</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
</el-container>
...
...
@@ -168,7 +170,7 @@ These components use flex for layout, so please make sure your browser supports
```
:::
### Example
### Ejemplo
::: demo
```html
...
...
@@ -278,22 +280,22 @@ These components use flex for layout, so please make sure your browser supports
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |