Merge pull request #8753 from ElemeFE/es-doc

Es doc

Merge pull request #8753 from ElemeFE/es-doc
Es doc
f01ebad0 · 杨奕 · GitHub · 1fb98ef1 · 27b27103 · f01ebad0
Commit f01ebad0 authored Dec 11, 2017 by 杨奕 Committed by GitHub Dec 11, 2017
65 changed files
--- a/CHANGELOG.es-SP.md
+++ b/CHANGELOG.es-SP.md
--- a/build/bin/new-lang.js
+++ b/build/bin/new-lang.js
@@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) {
  console.error(`${lang} already exists.`);
  process.exit(1);
 }
-let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang });
+let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang });
 componentFile.push(componentNew);
 fileSave(path.join(__dirname, '../../examples/i18n/component.json'))
  .write(JSON.stringify(componentFile, null, '  '), 'utf8')
@@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json'))

 // 添加到 page.json
 const pageFile = require('../../examples/i18n/page.json');
-let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang });
+let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang });
 pageFile.push(pageNew);
 fileSave(path.join(__dirname, '../../examples/i18n/page.json'))
  .write(JSON.stringify(pageFile, null, '  '), 'utf8')
@@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json'))

 // 添加到 nav.config.json
 const navFile = require('../../examples/nav.config.json');
-navFile[lang] = navFile['en-us'];
+navFile[lang] = navFile['en-US'];
 fileSave(path.join(__dirname, '../../examples/nav.config.json'))
  .write(JSON.stringify(navFile, null, '  '), 'utf8')
  .end('\n');

--- a/examples/app.vue
+++ b/examples/app.vue
@@ -187,7 +187,22 @@
  import { use } from 'main/locale';
  import zhLocale from 'main/locale/lang/zh-CN';
  import enLocale from 'main/locale/lang/en';
-  use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale);
+  import esLocale from 'main/locale/lang/es';
+
+  const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
+  const localize = lang => {
+    switch (lang) {
+      case 'zh-CN':
+        use(zhLocale);
+        break;
+      case 'es':
+        use(esLocale);
+        break;
+      default:
+        use(enLocale);
+    }
+  };
+  localize(lang);

  export default {
    name: 'app',
@@ -206,14 +221,11 @@
        if (val === 'zh-CN') {
          this.suggestJump();
        }
-        this.localize();
+        localize(val);
      }
    },

    methods: {
-      localize() {
-        use(this.lang === 'zh-CN' ? zhLocale : enLocale);
-      },
      suggestJump() {
        const href = location.href;
        const preferGithub = localStorage.getItem('PREFER_GITHUB');
@@ -232,8 +244,10 @@
    },

    mounted() {
-      this.localize();
-      this.suggestJump();
+      localize(this.lang);
+      if (this.lang === 'zh-CN') {
+        this.suggestJump();
+      }
      setTimeout(() => {
        const notified = localStorage.getItem('ES_NOTIFIED');
        if (!notified && this.lang !== 'zh-CN') {

--- a/examples/docs/es/alert.md
+++ b/examples/docs/es/alert.md
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
+
+## Alert
+
+Mostrar mensajes de alertas importantes.
+
+### Uso básico
+
+Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
+
+::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success">
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info">
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning">
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error">
+  </el-alert>
+</template>
+```
+:::
+
+### Personalización del botón de cerrar 
+
+Personalizar el botón de cerrar como texto u otros símbolos.
+
+::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
+
+
+```html
+<template>
+  <el-alert
+    title="unclosable alert"
+    type="success"
+    :closable="false">
+  </el-alert>
+  <el-alert
+    title="customized close-text"
+    type="info"
+    close-text="Gotcha">
+  </el-alert>
+  <el-alert
+    title="alert with callback"
+    type="warning"
+    @close="hello">
+  </el-alert>
+</template>
+
+<script>
+  export default {
+    methods: {
+      hello() {
+        alert('Hello World!');
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Usar iconos
+
+Mostrar un icono mejora la legibilidad.
+
+::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
+
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Texto centrado
+
+Para centrar el texto utilice el atributo `center`.
+
+::: demo
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Con descripción
+
+Descripción incluye un mensaje con información más detallada.
+
+::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
+
+```html
+<template>
+  <el-alert
+    title="with description"
+    type="success"
+    description="This is a description.">
+  </el-alert>
+</template>
+```
+:::
+
+### Utilizando icono y descripción
+
+::: demo Finalmente este es un ejemplo utilizando icono y descripción.
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    description="more text description"
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    description="more text description"
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
+### Atributos
+| Atributo    | Descripción                              | Tipo    | Valores aceptados          | Por defecto |
+| ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- |
+| title       | título. Requerido                        | string  | —                          | —           |
+| type        | tipo de componente                       | string  | success/warning/info/error | info        |
+| description | texto descriptivo. También puede ser pasado con el slot por defecto | string  | —                          | —           |
+| closable    | si se puede cerrar o no                  | boolean | —                          | true        |
+| center      | si el texto debe estar centrado          | boolean | —                          | false       |
+| close-text  | texto de cerrado personalizado           | string  | —                          | —           |
+| show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |
+
+
+### Eventos
+| Nombre del evento | Descripción                           | Parámetros |
+| ----------------- | ------------------------------------- | ---------- |
+| close             | Se dispara cuando la alerta se cierra | —          |
--- a/examples/docs/es/badge.md
+++ b/examples/docs/es/badge.md
+## Badge
+
+Marcas en forma de número o estado para botones e iconos.
+
+### Uso básico
+
+Muestra la cantidad de mensajes nuevos.
+
+:::demo La cantidad está definida por `value` que acepta `Number` o `String`.
+
+```html
+<el-badge :value="12" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="3" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<el-dropdown trigger="click">
+  <span class="el-dropdown-link">
+    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
+  </span>
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item class="clearfix">
+      comments
+      <el-badge class="mark" :value="12" />
+    </el-dropdown-item>
+    <el-dropdown-item class="clearfix">
+      replies
+      <el-badge class="mark" :value="3" />
+    </el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Valor máximo
+
+Se puede personalizar el valor máximo.
+
+::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
+
+```html
+<el-badge :value="200" :max="99" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="100" :max="10" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Personalizaciones
+
+Mostrar texto en vez de números.
+
+:::demo Cuando `value` es un `String`, puede mostrar texto personalizado.
+
+```html
+<el-badge value="new" class="item">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge value="hot" class="item">
+  <el-button size="small">replies</el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+### Pequeño punto rojo
+
+Puede utilizar un punto rojo para marcar contenido que debe ser notado.
+
+:::demo Use el atributo `is-dot`. Es un `Boolean`.
+
+```html
+<el-badge is-dot class="item">query</el-badge>
+<el-badge is-dot class="item">
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
+</el-badge>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
+```
+:::
+
+<style scoped>
+  .share-button {
+    width: 36px;
+    padding: 10px;
+  }
+
+  .mark {
+    margin-top: 8px;
+    line-height: 1;
+    float: right;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .item {
+    margin-right: 40px;
+  }
+</style>
+
+### Atributos
+| Atributo | Descripción                              | Tipo           | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |
+| value    | valor a mostrar                          | string, number | —                 | —           |
+| max      | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number         | —                 | —           |
+| is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
+| hidden   | hidden badge                             | boolean        | —                 | false       |
--- a/examples/docs/es/breadcrumb.md
+++ b/examples/docs/es/breadcrumb.md
+## Breadcrumb
+
+Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.
+
+### Uso básico
+
+
+:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
+
+```html
+<el-breadcrumb separator="/">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Icono separador
+
+:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
+### Breadcrumb atributos
+| Atributo        | Descripción                            | Tipo   | Valores aceptados | Por defecto |
+| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
+| separator       | caracter separador                     | string | —                 | /           |
+| separator-class | nombre de la clase del icono separador | string | —                 | -           |
+
+### Breadcrumb Item atributos
+| Atributo | Descripción                              | Tipo          | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |
+| to       | ruta del link, lo mismo que `to` de `vue-router` | string/object | —                 | —           |
+| replace  | si `true`,  la navegación no dejara una entrada en la historia | boolean       | —                 | false       |
+
+
+
+
+
--- a/examples/docs/es/button.md
+++ b/examples/docs/es/button.md
+<style>
+  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 10px;
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      margin-bottom: 20px;
+    
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+    
+      & + .el-button-group {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+
+## Button
+
+Botones comúnmente usados.
+
+### Uso básico
+
+::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
+
+```html
+<div>
+  <el-button>Default</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</div>
+
+<div style="margin: 20px 0">
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</div>
+
+<div>
+  <el-button round>Round</el-button>
+  <el-button type="primary" round>Primary</el-button>
+  <el-button type="success" round>Success</el-button>
+  <el-button type="info" round>Info</el-button>
+  <el-button type="warning" round>Warning</el-button>
+  <el-button type="danger" round>Danger</el-button>
+</div>
+```
+:::
+
+### Botón deshabilitado
+
+El atributo `disabled` determina su un botón esta deshabilitado.
+
+:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
+
+```html
+<div>
+  <el-button disabled>Default</el-button>
+  <el-button type="primary" disabled>Primary</el-button>
+  <el-button type="success" disabled>Success</el-button>
+  <el-button type="info" disabled>Info</el-button>
+  <el-button type="warning" disabled>Warning</el-button>
+  <el-button type="danger" disabled>Danger</el-button>
+</div>
+
+<div style="margin-top: 20px">
+  <el-button plain disabled>Plain</el-button>
+  <el-button type="primary" plain disabled>Primary</el-button>
+  <el-button type="success" plain disabled>Success</el-button>
+  <el-button type="info" plain disabled>Info</el-button>
+  <el-button type="warning" plain disabled>Warning</el-button>
+  <el-button type="danger" plain disabled>Danger</el-button>
+</div>
+```
+:::
+
+### Botón de texto
+
+Botones sin borde ni fondo.
+
+:::demo
+```html
+<el-button type="text">Text Button</el-button>
+<el-button type="text" disabled>Text Button</el-button>
+```
+:::
+
+### Botón icono
+
+Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
+
+:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
+
+```html
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
+<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
+```
+:::
+
+### Grupo de botones
+
+Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
+
+:::demo Use el tag `<el-button-group>` para agrupar sus botones.
+
+```html
+<el-button-group>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
+  <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
+</el-button-group>
+<el-button-group>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
+</el-button-group>
+```
+:::
+
+### Botón de descarga 
+
+Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
+
+:::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga.
+
+```html
+<el-button type="primary" :loading="true">Loading</el-button>
+```
+:::
+
+### Tamaños
+
+Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
+
+:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
+
+```html
+<div>
+  <el-button>Default</el-button>
+  <el-button size="medium">Medium</el-button>
+  <el-button size="small">Small</el-button>
+  <el-button size="mini">Mini</el-button>
+</div>
+<div style="margin-top: 20px">
+  <el-button round>Default</el-button>
+  <el-button size="medium" round>Medium</el-button>
+  <el-button size="small" round>Small</el-button>
+  <el-button size="mini" round>Mini</el-button>
+</div>
+```
+:::
+
+### Atributos
+| Atributo    | Descripción                              | Tipo    | Valores aceptados                        | Por defecto |
+| ----------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
+| size        | tamaño del botón                         | string  | medium / small / mini                    | —           |
+| type        | tipo de botón                            | string  | primary / success / warning / danger / info / text | —           |
+| plain       | determinar si es o no un botón plano     | boolean | —                                        | false       |
+| round       | determinar si es o no un botón redondo   | boolean | —                                        | false       |
+| loading     | determinar si es o no un botón de descarga | boolean | —                                        | false       |
+| disabled    | deshabilitar el botón                    | boolean | —                                        | false       |
+| icon        | nombre de la clase del icono             | string  | —                                        | —           |
+| autofocus   | misma funcionalidad que la nativa `autofocus` | boolean | —                                        | false       |
+| native-type | misma funcionalidad que la nativa `type` | string  | button / submit / reset                  | button      |
\ No newline at end of file
--- a/examples/docs/es/card.md
+++ b/examples/docs/es/card.md
+<script>
+  import dateUtil from 'main/utils/date'
+  export default {
+    data() {
+      return {
+        currentDate: dateUtil.format(new Date(), 'yyyy-MM-dd HH:mm')
+      };
+    }
+  }
+</script>
+
+<style scoped>
+  .text {
+    font-size: 14px;
+  }
+
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix {
+    @utils-clearfix;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+## Card
+Muestra información dentro de un contenedor `card`
+
+### Uso Basico
+
+`Card` incluye titulo, contenido y operaciones.
+
+:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su  contenido depende de un slot con nombre.
+
+```html
+<el-card class="box-card">
+  <div slot="header" class="clearfix">
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
+  </div>
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Card simple
+
+La parte de la cabecera puede omitirse.
+
+:::demo
+```html
+<el-card class="box-card">
+  <div v-for="o in 4" :key="o" class="text item">
+    {{'List item ' + o }}
+  </div>
+</el-card>
+
+<style>
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    padding: 18px 0;
+  }
+
+  .box-card {
+    width: 480px;
+  }
+</style>
+```
+:::
+
+### Con imágenes
+
+Muestre un contenido más rico añadiendo algunas configuraciones.
+
+:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza  `el-col` para el layout.
+
+```html
+<el-row>
+  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
+    <el-card :body-style="{ padding: '0px' }">
+      <img src="~examples/assets/images/hamburger.png" class="image">
+      <div style="padding: 14px;">
+        <span>Yummy hamburger</span>
+        <div class="bottom clearfix">
+          <time class="time">{{ currentDate }}</time>
+          <el-button type="text" class="button">Operating button</el-button>
+        </div>
+      </div>
+    </el-card>
+  </el-col>
+</el-row>
+
+<style>
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+  
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+      display: table;
+      content: "";
+  }
+  
+  .clearfix:after {
+      clear: both
+  }
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      currentDate: new Date()
+    };
+  }
+}
+</script>
+```
+:::
+
+### Atributos
+| Atributo   | Descripción                              | Tipo   | Valores aceptados | Por defecto         |
+| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
+| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string | —                 | —                   |
+| body-style | Estilo CSS del cuerpo                    | object | —                 | { padding: '20px' } |
--- a/examples/docs/es/carousel.md
+++ b/examples/docs/es/carousel.md
+<script>
+  export default {
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+        demos[0].className += ' small';
+        demos[3].className += ' medium';
+      });
+    }
+  }
+</script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
+## Carousel
+
+Presenta una serie de imágenes o textos en un espacio limitado
+
+### Uso básico
+
+::: demo Combine `el-carousel`  con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  `trigger`  para  `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
+
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is hovered (default)</span>
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+  <div class="block">
+    <span class="demonstration">Switch when indicator is clicked</span>
+    <el-carousel trigger="click" height="150px">
+      <el-carousel-item v-for="item in 4" :key="item">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 150px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Indicadores
+
+Los indicadores de paginacion pueden mostrarse fuera del carrusel
+
+::: demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
+
+```html
+<template>
+  <el-carousel indicator-position="outside">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Flechas
+
+Puede definir cuando se visualizan las flechas
+
+::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
+
+```html
+<template>
+  <el-carousel :interval="5000" arrow="always">
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 18px;
+    opacity: 0.75;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Modo Card
+
+Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
+
+::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
+
+```html
+<template>
+  <el-carousel :interval="4000" type="card" height="200px">
+    <el-carousel-item v-for="item in 6" :key="item">
+      <h3>{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<style>
+  .el-carousel__item h3 {
+    color: #475669;
+    font-size: 14px;
+    opacity: 0.75;
+    line-height: 200px;
+    margin: 0;
+  }
+
+  .el-carousel__item:nth-child(2n) {
+    background-color: #99a9bf;
+  }
+
+  .el-carousel__item:nth-child(2n+1) {
+    background-color: #d3dce6;
+  }
+</style>
+```
+:::
+
+### Atributos de Carousel
+| Atributo           | Descripcion                              | Tipo    | Valores aceptados  | Por defecto |
+| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- |
+| height             | Alto del carrusel                        | string  | —                  | —           |
+| initial-index      | Indice del slider inicial activo (empieza desde 0) | number  | —                  | 0           |
+| trigger            | Evento que muestra los indicadores       | string  | hover/click        | hover       |
+| autoplay           | Si se enlazan automáticamente las diapositivas | boolean | —                  | true        |
+| interval           | Intervalo del auto loop, en milisegundos | number  | —                  | 3000        |
+| indicator-position | Posición del indicador de paginación     | string  | outside/none       | —           |
+| arrow              | Cuando se muestran las flechas           | string  | always/hover/never | hover       |
+| type               | Tipo de carrusel                         | string  | card               | —           |
+
+### Eventos de Carousel
+| Nombre evento | Descripción                              | Parametros                               |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| change        | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
+
+### Metodos de Carousel
+| Metodos       | Descripción                | Parametros                               |
+| ------------- | -------------------------- | ---------------------------------------- |
+| setActiveItem | Cambio manual de slider    | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
+| prev          | Cambia al slider anterior  | —                                        |
+| next          | Cambia al slider siguiente | —                                        |
+
+### Atributos de Carousel-Item
+| Atributo | Descripción                              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
+| name     | Nombre del item que puede ser usado en `setActiveItem` | string | —                 | —           |
+| label    | Texto que se mostrara en el indicador de paginacion correspondiente | string | —                 | —           |
+
--- a/examples/docs/es/cascader.md
+++ b/examples/docs/es/cascader.md
--- a/examples/docs/es/checkbox.md
+++ b/examples/docs/es/checkbox.md
--- a/examples/docs/es/collapse.md
+++ b/examples/docs/es/collapse.md
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1'],
+        activeName: '1'
+      };
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      }
+    }
+  }
+</script>
+
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
+## Collapse
+
+Use Collapse para almacenar contenidos.
+
+### Uso básico
+
+Puede expandir varios paneles
+
+:::demo
+```html
+<el-collapse v-model="activeNames" @change="handleChange">
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeNames: ['1']
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Acordeón
+
+En modo acordeón sólo un panel puede ser expandido a la vez
+
+:::demo Activa el modo acordeón usado el atributo `accordion`.
+```html
+<el-collapse v-model="activeName" accordion>
+  <el-collapse-item title="Consistency" name="1">
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+<script>
+  export default {
+    data() {
+      return {
+        activeName: '1'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### Título personalizado
+
+Además de usar el atributo `title`, se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
+
+:::demo
+```html
+<el-collapse accordion>
+  <el-collapse-item name="1">
+    <template slot="title">
+      Consistency<i class="header-icon el-icon-information"></i>
+    </template>
+    <div>Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;</div>
+    <div>Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Feedback" name="2">
+    <div>Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;</div>
+    <div>Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Efficiency" name="3">
+    <div>Simplify the process: keep operating process simple and intuitive;</div>
+    <div>Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;</div>
+    <div>Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
+  </el-collapse-item>
+  <el-collapse-item title="Controllability" name="4">
+    <div>Decision making: giving advices about operations is acceptable, but do not make decisions for the users;</div>
+    <div>Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
+  </el-collapse-item>
+</el-collapse>
+```
+:::
+
+### Atributos de Collapse
+| Atributo  | Descripción                           | Tipo                                     | Valores aceptados | Por defecto |
+| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
+| accordion | especifica si activa el modo acordeón | boolean                                  | —                 | false       |
+| value     | panel activo                          | string (modo acordeón)/array (No modo acordeón) | —                 | —           |
+
+### Eventos de Collapse
+| Nombre de Evento | Descripción                              | Parametros                               |
+| ---------------- | ---------------------------------------- | ---------------------------------------- |
+| change           | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
+
+
+### Atributos de Collapse Item
+| Atributo | Descripción                   | Tipo          | Valores aceptados | Por defecto |
+| -------- | ----------------------------- | ------------- | ----------------- | ----------- |
+| name     | identificador único del panel | string/number | —                 | —           |
+| title    | título del panel              | string        | —                 | —           |
\ No newline at end of file
--- a/examples/docs/es/color-picker.md
+++ b/examples/docs/es/color-picker.md
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#409EFF',
+        color2: null,
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF'
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        const demos = document.querySelectorAll('.source');
+        demos[0].style.padding = '0';
+      });
+    },
+  }
+</script>
+
+<style>
+  .demo-color-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    display: inline-block;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-color-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
+</style>
+
+## ColorPicker
+
+ColorPicker es un selector de color que soporta varios formatos de color.
+
+### Uso básico
+
+:::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`.
+```html
+<div class="block">
+  <span class="demonstration">Especifica valor por defecto</span>
+  <el-color-picker v-model="color1"></el-color-picker>
+</div>
+<div class="block">
+  <span class="demonstration">No especifica valor por defecto</span>
+  <el-color-picker v-model="color2"></el-color-picker>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        color1: '#409EFF',
+        color2: null
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Alpha
+
+:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
+```html
+<el-color-picker v-model="color3" show-alpha></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color3: 'rgba(19, 206, 102, 0.8)'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Sizes
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#409EFF'
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos
+| Atributo     | Descripción                              | Tipo    | Valores aceptados     | Por defecto                              |
+| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
+| disabled     | especifica si se deshabilita el ColorPicker | boolean | —                     | false                                    |
+| size         | tamaño del ColorPicker                   | string  | —                     | medium / small / mini                    |
+| show-alpha   | especifica si se muestra el control deslizante para el valor alpha | boolean | —                     | false                                    |
+| color-format | formato de color del `v-model`           | string  | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
+| popper-class | nombre de clase para el dropdown del ColorPicker | string  | —                     | —                                        |
+
+### Eventos
+| Nombre de Evento | Descripción                              | Parametros             |
+| ---------------- | ---------------------------------------- | ---------------------- |
+| change           | se dispara cuando el valor del input cambia | valor del color        |
+| active-change    | se dispara cuando el actual color activo cambia | valor del color activo |
+
--- a/examples/docs/es/color.md
+++ b/examples/docs/es/color.md
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+    
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+      line-height: 24px;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue {
+    background-color: #409EFF;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+  .bg-info {
+    background-color: #878D99;
+  }
+
+  .bg-text-primary {
+    background-color: #2d2f33;
+  }
+  .bg-text-regular {
+    background-color: #5a5e66;
+  }
+  .bg-text-secondary {
+    background-color: #878d99;
+  }
+  .bg-text-placeholder {
+    background-color: #b4bccc;
+  }
+
+  .bg-border-base {
+    background-color: #d8dce5;
+  }
+  .bg-border-light {
+    background-color: #dfe4ed;
+  }
+  .bg-border-lighter {
+    background-color: #e6ebf5;
+  }
+  .bg-border-extra-light {
+    background-color: #edf2fc;
+  }
+
+  [class*=" bg-border-"] {
+    color: #5a5e66;
+  }
+</style>
+
+## Color
+Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye.
+
+### Color principal
+
+El color principal de Element es el azul brillante y amigable.
+
+<el-row :gutter="12">
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Azul<div class="value">#409EFF</div></div>
+  </el-col>
+</el-row>
+
+### Color secundario
+
+Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
+
+<el-row :gutter="12">
+  <el-col :span="6">
+    <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-warning">Precaución<div class="value">#EB9E05</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-danger">Peligro<div class="value">#FA5555</div></div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
+  </el-col>
+</el-row>
+
+### Color neutro
+
+Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
+
+<el-row :gutter="12">
+  <el-col :span="6">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#B4BCCC</div></div>
+    </div>
+  </el-col>
+  <el-col :span="6">
+    <div class="demo-color-box-group">
+      <div class="demo-color-box bg-border-base">Borde base<div class="value">#D8DCE5</div></div>
+      <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#EDF2FC</div></div>
+    </div>
+  </el-col>
+</el-row>
\ No newline at end of file
--- a/examples/docs/es/container.md
+++ b/examples/docs/es/container.md
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+
+  .el-aside {
+    color: #333;
+  }
+
+  #disenos-comunes + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+    
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+    
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+    
+    & > .source > .el-container {
+      margin-bottom: 40px;
+    
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+    
+     &:nth-child(7) .el-aside {
+       line-height: 320px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+
+## Contenedor
+Componentes contenedores para iniciar una estructura básica de un sitio:
+
+`<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>`: Contenedor para cabeceras.
+
+`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
+
+`<el-main>`: Contenedor para sección principal.
+
+`<el-footer>`: Contenedor para pie de página.
+
+:::tip
+Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. 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>`.
+:::
+
+### Diseños comunes
+
+::: demo
+```html
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-main>Principal</el-main>
+  <el-footer>Pie de página</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-main>Principal</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-container>
+    <el-aside width="200px">Barra lateral</el-aside>
+    <el-main>Principal</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Cabecera</el-header>
+  <el-container>
+    <el-aside width="200px">Barra lateral</el-aside>
+    <el-container>
+      <el-main>Principal</el-main>
+      <el-footer>Pie de página</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-container>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Barra lateral</el-aside>
+  <el-container>
+    <el-header>Cabecera</el-header>
+    <el-main>Principal</el-main>
+    <el-footer>Pie de página</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .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;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### Ejemplo
+
+::: demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <el-menu-item-group>
+          <template slot="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-submenu index="1-4">
+          <template slot="title">Option4</template>
+          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
+        <el-menu-item-group>
+          <template slot="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-submenu index="2-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
+        <el-menu-item-group>
+          <template slot="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-submenu index="3-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>View</el-dropdown-item>
+          <el-dropdown-item>Add</el-dropdown-item>
+          <el-dropdown-item>Delete</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>Tom</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="Date" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="Address">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Atributos de contenedor
+| Atributo  | Descripción                              | Tipo   | Valores aceptados     | Por defecto                              |
+| --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |
+| 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 |
+
+### Atributos de cabecera
+| Atributo | Descripción           | Tipo   | Valores aceptados | Por defecto |
+| -------- | --------------------- | ------ | ----------------- | ----------- |
+| height   | altura de la cabecera | string | —                 | 60px        |
+
+### Atributos de barra lateral
+| Atributo | Descripción               | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------------- | ------ | ----------------- | ----------- |
+| width    | ancho de la barra lateral | string | —                 | 300px       |
+
+### Atributos de pie de página
+| Atributo | Descripción              | Tipo   | Valores aceptados | Por defecto |
+| -------- | ------------------------ | ------ | ----------------- | ----------- |
+| height   | altura del pie de página | string | —                 | 60px        |
\ No newline at end of file
--- a/examples/docs/es/custom-theme.md
+++ b/examples/docs/es/custom-theme.md
+## Tema personalizado
+Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
+
+### Cambiando el color del tema
+Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
+
+Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
+
+### Actualizando variables SCSS en tu proyecto
+`theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
+
+```html
+/* Color del tema */
+$--color-primary: teal;
+
+/* Ubicación de la fuente, obligatoria */
+$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
+
+@import "../node_modules/element-ui/packages/theme-chalk/src/index";
+```
+
+Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+:::tip
+Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
+:::
+
+### CLI para generar temas
+Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:
+
+#### <strong>Instalación</strong>
+Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.
+```shell
+npm i element-theme -g
+```
+
+Ahora, instale el tema `chalk` desde npm o Github.
+```shell
+# desde npm
+npm i element-theme-chalk -D
+
+# desde GitHub
+npm i https://github.com/ElementUI/theme-chalk -D
+```
+
+#### <strong>Inicializar archivo de variables</strong>
+Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
+
+```shell
+et -i [custom output file]
+
+> ✔ Generator variables file
+```
+
+En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
+```css
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #eb9e05 !default;
+$--color-danger: #fa5555 !default;
+$--color-info: #878d99 !default;
+
+...
+```
+
+#### <strong>Modificando variables</strong>
+Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
+```CSS
+$--color-primary: red;
+```
+
+#### <strong>Construyendo el tema</strong>
+Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
+```shell
+et
+
+> ✔ build theme font
+> ✔ build element theme
+```
+
+#### <strong>Importar un tema personalizado</strong>
+Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
+
+```javascript
+import '../theme/index.css'
+import ElementUI from 'element-ui'
+import Vue from 'vue'
+
+Vue.use(ElementUI)
+```
+
+#### <strong>Importar un tema de componente bajo demanda</strong>
+Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
+```json
+{
+  "plugins": [["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "~theme"
+    }
+  ]]]
+}
+```
+
+Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.
\ No newline at end of file
--- a/examples/docs/es/date-picker.md
+++ b/examples/docs/es/date-picker.md
--- a/examples/docs/es/datetime-picker.md
+++ b/examples/docs/es/datetime-picker.md
--- a/examples/docs/es/dialog.md
+++ b/examples/docs/es/dialog.md
--- a/examples/docs/es/dropdown.md
+++ b/examples/docs/es/dropdown.md
--- a/examples/docs/es/form.md
+++ b/examples/docs/es/form.md
--- a/examples/docs/es/i18n.md
+++ b/examples/docs/es/i18n.md
--- a/examples/docs/es/icon.md
+++ b/examples/docs/es/icon.md
--- a/examples/docs/es/input-number.md
+++ b/examples/docs/es/input-number.md
--- a/examples/docs/es/input.md
+++ b/examples/docs/es/input.md
--- a/examples/docs/es/installation.md
+++ b/examples/docs/es/installation.md
+## Instalación
+
+### npm
+Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
+
+```shell
+npm i element-ui -S
+```
+
+### CDN 
+Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
+
+```html
+<!-- import CSS -->
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<!-- import JavaScript -->
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+```
+
+##Tip
+Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
+
+
+### Hello world
+Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <!-- import CSS -->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+</head>
+<body>
+  <div id="app">
+    <el-button @click="visible = true">Button</el-button>
+    <el-dialog :visible.sync="visible" title="Hello world">
+      <p>Try Element</p>
+    </el-dialog>
+  </div>
+</body>
+  <!-- import Vue before Element -->
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <!-- import JavaScript -->
+  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script>
+    new Vue({
+      el: '#app',
+      data: function() {
+        return { visible: false }
+      }
+    })
+  </script>
+</html>
+```
+Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start
+
--- a/examples/docs/es/layout.md
+++ b/examples/docs/es/layout.md
--- a/examples/docs/es/loading.md
+++ b/examples/docs/es/loading.md
--- a/examples/docs/es/menu.md
+++ b/examples/docs/es/menu.md
--- a/examples/docs/es/message-box.md
+++ b/examples/docs/es/message-box.md
--- a/examples/docs/es/message.md
+++ b/examples/docs/es/message.md
--- a/examples/docs/es/notification.md
+++ b/examples/docs/es/notification.md
--- a/examples/docs/es/pagination.md
+++ b/examples/docs/es/pagination.md
--- a/examples/docs/es/popover.md
+++ b/examples/docs/es/popover.md
--- a/examples/docs/es/progress.md
+++ b/examples/docs/es/progress.md
--- a/examples/docs/es/quickstart.md
+++ b/examples/docs/es/quickstart.md
--- a/examples/docs/es/radio.md
+++ b/examples/docs/es/radio.md
--- a/examples/docs/es/rate.md
+++ b/examples/docs/es/rate.md
--- a/examples/docs/es/select.md
+++ b/examples/docs/es/select.md
--- a/examples/docs/es/slider.md
+++ b/examples/docs/es/slider.md
--- a/examples/docs/es/steps.md
+++ b/examples/docs/es/steps.md
--- a/examples/docs/es/switch.md
+++ b/examples/docs/es/switch.md
--- a/examples/docs/es/table.md
+++ b/examples/docs/es/table.md
--- a/examples/docs/es/tabs.md
+++ b/examples/docs/es/tabs.md
--- a/examples/docs/es/tag.md
+++ b/examples/docs/es/tag.md
--- a/examples/docs/es/time-picker.md
+++ b/examples/docs/es/time-picker.md
--- a/examples/docs/es/tooltip.md
+++ b/examples/docs/es/tooltip.md
--- a/examples/docs/es/transfer.md
+++ b/examples/docs/es/transfer.md
--- a/examples/docs/es/transition.md
+++ b/examples/docs/es/transition.md
--- a/examples/docs/es/tree.md
+++ b/examples/docs/es/tree.md
--- a/examples/docs/es/typography.md
+++ b/examples/docs/es/typography.md
--- a/examples/docs/es/upload.md
+++ b/examples/docs/es/upload.md
--- a/examples/i18n/component.json
+++ b/examples/i18n/component.json
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
--- a/examples/i18n/route.json
+++ b/examples/i18n/route.json
@@ -4,5 +4,8 @@
  },
  {
    "lang": "en-US"
+  },
+  {
+    "lang": "es"
  }
 ]
--- a/examples/i18n/title.json
+++ b/examples/i18n/title.json
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
--- a/examples/pages/es/changelog.vue
+++ b/examples/pages/es/changelog.vue
--- a/examples/pages/es/component.vue
+++ b/examples/pages/es/component.vue
--- a/examples/pages/es/design.vue
+++ b/examples/pages/es/design.vue
--- a/examples/pages/es/guide.vue
+++ b/examples/pages/es/guide.vue
--- a/examples/pages/es/index.vue
+++ b/examples/pages/es/index.vue
--- a/examples/pages/es/nav.vue
+++ b/examples/pages/es/nav.vue
--- a/examples/pages/es/resource.vue
+++ b/examples/pages/es/resource.vue
--- a/examples/route.config.js
+++ b/examples/route.config.js