Skip to content

E
Element
Commit 8898108a authored by lesterbx's avatar lesterbx Committed by 杨奕
Browse files
Options

Added spanish documentation for Transfer, Transition and Tree

parent 67869b3c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 114 deletions
examples/docs/es/transfer.md
View file @ 8898108a
...@@ -72,8 +72,8 @@ ...@@ -72,8 +72,8 @@
## Transfer ## Transfer
### Basic usage ### Uso básico
:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array. :::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quieres que la lista destino esté vacía inicialmente puedes inicializar el `v-model` con un array.
```html ```html
<template> <template>
<el-transfer <el-transfer
...@@ -106,11 +106,12 @@ ...@@ -106,11 +106,12 @@
``` ```
::: :::
### Filterable ### Filtrar
You can search and filter data items. Puedes buscar y filtrar los items.
:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list. ::demo Pon el atributo `filterable` a true para permitir el filtrado.
Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
```html ```html
<template> <template>
<el-transfer <el-transfer
...@@ -153,9 +154,9 @@ You can search and filter data items. ...@@ -153,9 +154,9 @@ You can search and filter data items.
### Customizable ### Customizable
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents. Puedes customizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured. :::demo Usa `titles`, `button-texts`, `render-content` y `format` respectivamente para customizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quieres algunos items marcados inicialmente pudes usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Ten en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
```html ```html
<template> <template>
<el-transfer <el-transfer
...@@ -219,8 +220,9 @@ You can customize list titles, button texts, render function for data items, che ...@@ -219,8 +220,9 @@ You can customize list titles, button texts, render function for data items, che
### Prop aliases ### Prop aliases
By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases. Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias.
:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.
::: En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
```html ```html
<template> <template>
<el-transfer <el-transfer
...@@ -257,28 +259,29 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If ...@@ -257,28 +259,29 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| data | data source | array[{ key, label, disabled }] | — | [ ] | | data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
| filterable | whether Transfer is filterable | boolean | — | false | | filterable | Si se puede filtrar | boolean | — | false |
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword | | filter-placeholder | Placeholder para el input del filtro| string | — | Enter keyword |
| filter-method | custom filter method | function | — | — | | filter-method | Método de filtrado | function | — | — |
| titles | custom list titles | array | — | ['List 1', 'List 2'] | | titles | Títulos de las listas | array | — | ['List 1', 'List 2'] |
| button-texts | custom button texts | array | — | [ ] | | button-texts | Texto de los botones | array | — | [ ] |
| render-content | custom render function for data items | function(h, option) | — | — | | render-content | Función de renderizado | function(h, option) | — | — |
| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } | | format | Texto para el status en el header| object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | prop aliases for data source | object{key, label, disabled} | — | — | | props | prop alias para el origen de datos | object{key, label, disabled} | — | — |
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] | | left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] |
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] | | right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] |
### Slot ### Slot
| Name | Description | | Nombre | Descripcion |
|------|--------| |------|--------|
| left-footer | content of left list footer | | left-footer | Contenido del footer de la lista de la izquierda |
| right-footer | content of right list footer | | right-footer | Contenido del footer de la lista de la derecha |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre | Descripcion | Parametros |
|---------- |-------- |---------- | |---------- |-------- |---------- |
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys | | change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
examples/docs/es/transition.md
View file @ 8898108a
## Built-in transition ## Transiciones incorporadas
You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition). Puedes usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
### fade ### Fade
:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`. :::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.
```html ```html
<template> <template>
<div> <div>
...@@ -46,9 +46,9 @@ You can use Element's built-in transitions directly. Before that, please read th ...@@ -46,9 +46,9 @@ You can use Element's built-in transitions directly. Before that, please read th
``` ```
::: :::
### zoom ### Zoom
:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided. :::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.
```html ```html
<template> <template>
<div> <div>
...@@ -96,10 +96,8 @@ You can use Element's built-in transitions directly. Before that, please read th ...@@ -96,10 +96,8 @@ You can use Element's built-in transitions directly. Before that, please read th
::: :::
### collapse ### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`.
For collapse effect, use the `el-collapse-transition` component.
:::demo :::demo
```html ```html
<template> <template>
...@@ -147,7 +145,7 @@ For collapse effect, use the `el-collapse-transition` component. ...@@ -147,7 +145,7 @@ For collapse effect, use the `el-collapse-transition` component.
```js ```js
// fade/zoom // fade/zoom
import 'element-ui/lib/theme-chalk/base.css'; import 'element-ui/lib/theme-chalk/base.css';
// collapse // colapsar
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'; import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue' import Vue from 'vue'
......
examples/docs/es/tree.md
View file @ 8898108a
This diff is collapsed.
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