github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Finished translations.

pull/8219/head
Rubén Salvador García San Juan 2017-11-11 02:32:35 -05:00 committed by 杨奕
parent cbbe63efcf
commit 38130bd385
3 changed files with 100 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/docs/es/installation.md
View File

@ -1,14 +1,14 @@
## Installation ## Instalación
### npm ### 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 ```shell
npm i element-ui -S npm i element-ui -S
``` ```
### CDN ### 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 ```html
<!-- import CSS --> <!-- 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> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
``` ```
:::tip ##Tip
We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information. 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 ### 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 ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
</script> </script>
</html> </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

98
examples/docs/es/layout.md
View File

@ -31,13 +31,13 @@
## Layout ## 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 ```html
<el-row> <el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> <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 ```html
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <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 ```html
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <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 ```html
<el-row :gutter="20"> <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 ```html
<el-row type="flex" class="row-bg"> <el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <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 ### 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 ```html
<el-row :gutter="10"> <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> <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 ```js
import 'element-ui/lib/theme-chalk/display.css'; import 'element-ui/lib/theme-chalk/display.css';
``` ```
The classes are: Las clases son:
- `hidden-xs-only` - hide when on extra small viewports only - `hidden-xs-only` - oculto en viewports extra pequenhos solamente
- `hidden-sm-only` - hide when on small viewports and down - `hidden-sm-only` - oculto en viewports pequenhos solamente
- `hidden-sm-and-down` - hide when on small viewports and down - `hidden-sm-and-down` - oculto en viewports pequenhos y menores
- `hidden-sm-and-up` - hide when on small viewports and up - `hidden-sm-and-up` - oculto en viewports pequenhos y superiores
- `hidden-md-only` - hide when on medium viewports only - `hidden-md-only` - oculto en viewports medios solamente
- `hidden-md-and-down` - hide when on medium viewports and down - `hidden-md-and-down` - oculto en viewports medios y menores
- `hidden-md-and-up` - hide when on medium viewports and up - `hidden-md-and-up` - oculto en viewports medios y mayores
- `hidden-lg-only` - hide when on large viewports only - `hidden-lg-only` - ocultos en viewports grandes solamente
- `hidden-lg-and-down` - hide when on large viewports and down - `hidden-lg-and-down` - ocultos en viewports grandes y menores
- `hidden-lg-and-up` - hide when on large viewports and up - `hidden-lg-and-up` - ocultos en viewports grandes y superiores
- `hidden-xl-only` - hide when on extra large viewports only - `hidden-xl-only` - oculto en viewports extra grandes solamente
### Row Attributes ### Atributos Row
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | grid spacing | number | — | 0 | | gutter | espaciado de la grilla | number | — | 0 |
| type | layout mode, you can use flex, works in modern browsers | string | — | — | | type | modo del layout , puedes usar flex, funciona en navegadores modernos| string | — | — |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start | | justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top | | align | alineación vertical del layout flex | string | top/middle/bottom | top |
| tag | custom element tag | string | * | div | | tag | tag de elemento propio | string | * | div |
### Col Attributes ### Atributos Col
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| span | number of column the grid spans | number | — | 24 | | span | número de columnas que abarca la cuadrícula | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 | | offset | especific espacio en el lado izquierdo de la grill | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 | | push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 | | pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — | | xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | 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` Responsive columns or column props object | 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` Responsive columns or column props object | 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` Responsive columns or column props object | 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 | custom element tag | string | * | div | | tag | tag de elemento propio | string | * | div |

82
examples/docs/es/menu.md
View File

@ -53,13 +53,14 @@
## NavMenu ## NavMenu
Menu that provides navigation for your website. Menú que provee la navegación para tu sitio.
### Top bar ### 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 ```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item> <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 ### 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 ```html
<el-row class="tac"> <el-row class="tac">
<el-col :span="12"> <el-col :span="12">
@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
### Collapse ### Collapse
Vertical NavMenu could be collapsed. NavMenu vertical puede ser colapsado.
::: demo :::**Demo**
```html ```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"> <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">expand</el-radio-button> <el-radio-button :label="false">expand</el-radio-button>
@ -269,50 +271,50 @@ Vertical NavMenu could be collapsed.
``` ```
::: :::
### Menu Attribute ### Atributos Menu
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal / vertical | vertical | | mode | modo de presentación del menú | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false | | collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff | | background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 | | text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF | | active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF |
| default-active | index of currently active menu | string | — | — | | default-active | índice del menu-item activo | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — | | default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
| unique-opened | whether only one sub-menu can be active | boolean | — | false | | 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 | | menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es '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 | | router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
### Menu Methods ### Métodos Menu
| Event Name | Description | Parameters | | Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| open | open a specific sub-menu | index: index of the sub-menu to open | | open | abre un sub-menu específico | index: índice del sub-menu para abrir |
| close | close a specific sub-menu | index: index of the sub-menu to close | | close | cierra un sub-menu específico | index: índice del sub-menu para cerrar |
### Menu Events ### Eventos Menu
| Event Name | Description | Parameters | | 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 | | select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu | | open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu | | close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
### Menu-Item Events ### Eventos Menu-Item
| Event Name | Description | Parameters | | 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 ### Atributos SubMenu
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — | | index | identificador único | string | — | — |
### Menu-Item Attribute ### Atributos Menu-Item
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — | | index | identificador único | string | — | — |
| route | Vue Router object | object | — | — | | route | Object Vue Router | object | — | — |
### Menu-Group Attribute ### Atributos Menu-Group
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | group title | string | — | — | | title | título del grupo | string | — | — |