Skip to content

E
Element
Commit 38130bd3 authored by Rubén Salvador García San Juan's avatar Rubén Salvador García San Juan Committed by 杨奕
Browse files
Options

Finished translations.

parent cbbe63ef
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 98 deletions
examples/docs/es/installation.md
View file @ 38130bd3
## Installation
## Instalación
### npm
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
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
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página.
```html
<!-- import CSS -->
......@@ -17,12 +17,12 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
:::tip
We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
:::
##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
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
Si estás usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html
<!DOCTYPE html>
......@@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
</script>
</html>
```
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
Si estás usando npm y deseas combinarlo con webpack, por favor continúa a la siguiente página: Quick Start
examples/docs/es/layout.md
View file @ 38130bd3
......@@ -31,13 +31,13 @@
## Layout
Quickly and easily create layouts with the basic 24-column.
Rápido y facilmente crea un layout básico con 24 columnas.
### Basic layout
### Layout básico
Create basic grid layout using columns.
Crea un layout básico usando columnas.
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
:::**Demo** Con `row` y `col`, podemos facilmente manipular el layout usando el atributo `span`.
```html
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
......@@ -97,11 +97,11 @@ Create basic grid layout using columns.
```
:::
### Column spacing
### Espaciado de columnas
Column spacing is supported.
El espaciado de columnas está soportado.
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
```html
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
......@@ -141,11 +141,11 @@ Column spacing is supported.
```
:::
### Hybrid layout
### Layout híbrido
Form a more complex hybrid layout by combining the basic 1/24 columns.
Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
::: demo
:::**Demo**
```html
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
......@@ -194,11 +194,11 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
```
:::
### Column offset
### Offset de columnas
You can specify column offsets.
Puedes especificar offsets para las columnas.
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
```html
<el-row :gutter="20">
......@@ -244,11 +244,11 @@ You can specify column offsets.
```
:::
### Alignment
### Alineación
Use the flex layout to make flexible alignment of columns.
Usa flex layout para un alineamiento flexible de columnas.
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
:::**Demo** Puedes habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
```html
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
......@@ -309,9 +309,9 @@ Use the flex layout to make flexible alignment of columns.
### Responsive Layout
Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
::: demo
:::**Demo**
```html
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
......@@ -341,48 +341,48 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
```
:::
### Utility classes for hiding elements
### Clases útiles para ocultar elementos
Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesitas importar el siguiente archivo CSS para usar estas clases:
```js
import 'element-ui/lib/theme-chalk/display.css';
```
The classes are:
- `hidden-xs-only` - hide when on extra small viewports only
- `hidden-sm-only` - hide when on small viewports and down
- `hidden-sm-and-down` - hide when on small viewports and down
- `hidden-sm-and-up` - hide when on small viewports and up
- `hidden-md-only` - hide when on medium viewports only
- `hidden-md-and-down` - hide when on medium viewports and down
- `hidden-md-and-up` - hide when on medium viewports and up
- `hidden-lg-only` - hide when on large viewports only
- `hidden-lg-and-down` - hide when on large viewports and down
- `hidden-lg-and-up` - hide when on large viewports and up
- `hidden-xl-only` - hide when on extra large viewports only
### Row Attributes
Las clases son:
- `hidden-xs-only` - oculto en viewports extra pequenhos solamente
- `hidden-sm-only` - oculto en viewports pequenhos solamente
- `hidden-sm-and-down` - oculto en viewports pequenhos y menores
- `hidden-sm-and-up` - oculto en viewports pequenhos y superiores
- `hidden-md-only` - oculto en viewports medios solamente
- `hidden-md-and-down` - oculto en viewports medios y menores
- `hidden-md-and-up` - oculto en viewports medios y mayores
- `hidden-lg-only` - ocultos en viewports grandes solamente
- `hidden-lg-and-down` - ocultos en viewports grandes y menores
- `hidden-lg-and-up` - ocultos en viewports grandes y superiores
- `hidden-xl-only` - oculto en viewports extra grandes solamente
### Atributos Row
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | grid spacing | number | — | 0 |
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | * | div |
| gutter | espaciado de la grilla | number | — | 0 |
| type | modo del layout , puedes usar flex, funciona en navegadores modernos| string | — | — |
| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start |
| align | alineación vertical del layout flex | string | top/middle/bottom | top |
| tag | tag de elemento propio | string | * | div |
### Col Attributes
### Atributos Col
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| span | number of column the grid spans | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | * | div |
| span | número de columnas que abarca la cuadrícula | number | — | 24 |
| offset | especific espacio en el lado izquierdo de la grill | number | — | 0 |
| push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 |
| pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 |
| xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | tag de elemento propio | string | * | div |
examples/docs/es/menu.md
View file @ 38130bd3
......@@ -53,13 +53,14 @@
## NavMenu
Menu that provides navigation for your website.
Menú que provee la navegación para tu sitio.
### Top bar
Top bar NavMenu can be used in a variety of scenarios.
Top bar NavMenu puede ser usado en distinto escenarios.
:::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
......@@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios.
### Side bar
Vertical NavMenu with sub-menus.
NavMenu vertical con sub-menús.
:::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
```html
<el-row class="tac">
<el-col :span="12">
......@@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
### Collapse
Vertical NavMenu could be collapsed.
NavMenu vertical puede ser colapsado.
::: demo
:::**Demo**
```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">expand</el-radio-button>
......@@ -269,50 +271,50 @@ Vertical NavMenu could be collapsed.
```
:::
### Menu Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF |
| default-active | index of currently active menu | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
| mode | modo de presentación del menú | string | horizontal / vertical | vertical |
| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false |
| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff |
| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 |
| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF |
| default-active | índice del menu-item activo | string | — | — |
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover |
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean | — | false |
| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover |
| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
### Menu Methods
| Event Name | Description | Parameters |
### Métodos Menu
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| open | open a specific sub-menu | index: index of the sub-menu to open |
| close | close a specific sub-menu | index: index of the sub-menu to close |
| open | abre un sub-menu específico | index: índice del sub-menu para abrir |
| close | cierra un sub-menu específico | index: índice del sub-menu para cerrar |
### Menu Events
| Event Name | Description | Parameters |
### Eventos Menu
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
| select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
| open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
| close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
### Menu-Item Events
| Event Name | Description | Parameters |
### Eventos Menu-Item
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| click | callback function when menu-item is clicked | el: menu-item instance |
| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |
### SubMenu Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos SubMenu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — |
| index | identificador único | string | — | — |
### Menu-Item Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu-Item
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — |
| route | Vue Router object | object | — | — |
| index | identificador único | string | — | — |
| route | Object Vue Router | object | — | — |
### Menu-Group Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu-Group
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| title | group title | string | — | — |
| title | título del grupo | string | — | — |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment