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

Added spanish documentation for Transfer, Transition and Tree

pull/8123/head^2
lesterbx 2017-11-15 23:38:38 +01:00 committed by 杨奕
parent 67869b3cd1
commit 8898108a5a
3 changed files with 112 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
examples/docs/es/transfer.md
View File

@ -72,8 +72,8 @@
## Transfer
### Basic usage
:::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.
### Uso básico
:::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
<template>
<el-transfer
@ -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
<template>
<el-transfer
@ -153,9 +154,9 @@ You can search and filter data items.
### 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
<template>
<el-transfer
@ -219,8 +220,9 @@ You can customize list titles, button texts, render function for data items, che
### 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.
:::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`.
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.
::: 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
<template>
<el-transfer
@ -257,28 +259,29 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| data | data source | array[{ key, label, disabled }] | — | [ ] |
| filterable | whether Transfer is filterable | boolean | — | false |
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
| filter-method | custom filter method | function | — | — |
| titles | custom list titles | array | — | ['List 1', 'List 2'] |
| button-texts | custom button texts | array | — | [ ] |
| render-content | custom render function for data items | function(h, option) | — | — |
| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | prop aliases for data source | object{key, label, disabled} | — | — |
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
| filterable | Si se puede filtrar | boolean | — | false |
| filter-placeholder | Placeholder para el input del filtro| string | — | Enter keyword |
| filter-method | Método de filtrado | function | — | — |
| titles | Títulos de las listas | array | — | ['List 1', 'List 2'] |
| button-texts | Texto de los botones | array | — | [ ] |
| render-content | Función de renderizado | function(h, option) | — | — |
| format | Texto para el status en el header| object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | prop alias para el origen de datos | object{key, label, disabled} | — | — |
| left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] |
| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] |
### Slot
| Name | Description |
| Nombre | Descripcion |
|------|--------|
| left-footer | content of left list footer |
| right-footer | content of right list footer |
| left-footer | Contenido del footer de la lista de la izquierda |
| right-footer | Contenido del footer de la lista de la derecha |
### Events
| Event Name | Description | Parameters |
### Eventos
| 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 |

20
examples/docs/es/transition.md
View File

@ -1,10 +1,10 @@
## 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
<template>
<div>
@ -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
<template>
<div>
@ -96,10 +96,8 @@ You can use Element's built-in transitions directly. Before that, please read th
:::
### collapse
For collapse effect, use the `el-collapse-transition` component.
### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`.
:::demo
```html
<template>
@ -147,7 +145,7 @@ For collapse effect, use the `el-collapse-transition` component.
```js
// fade/zoom
import 'element-ui/lib/theme-chalk/base.css';
// collapse
// colapsar
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'

145
examples/docs/es/tree.md
View File

@ -286,11 +286,11 @@
## Tree
Display a set of data with hierarchies.
Muestra un conjunto de datos jerárquicos.
### Basic usage
### Uso básico
Basic tree structure.
Estructura básica de árbol.
::: demo
```html
@ -351,11 +351,11 @@ Basic tree structure.
```
:::
### Selectable
### Seleccionable
Used for node selection.
Usado para la selección de nodos.
::: demo This example also shows how to load node data asynchronously.
::: demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
```html
<el-tree
:props="props"
@ -419,9 +419,9 @@ Used for node selection.
```
:::
### Custom leaf node in lazy mode
### Nodos hoja en modo perezoso
::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puedes decirle al árbol que el nodo es una hoja de antemano, y así evitas que muestre el botón de desplegar.
```html
<el-tree
:props="props1"
@ -465,11 +465,11 @@ Used for node selection.
```
:::
### Disabled checkbox
### Checkbox desactivados
The checkbox of a node can be set as disabled.
El checkbox de un nodo se puede poner como desactivado.
::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
::: demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
```html
<el-tree
:data="data3"
@ -522,10 +522,10 @@ The checkbox of a node can be set as disabled.
```
:::
### Default expanded and default checked
Tree nodes can be initially expanded or checked
### Desplegado o seleccionado por defecto
Los nodos pueden estar desplegados o seleccionados por defecto.
::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
:::demo Utiliza `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Ten en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
```html
<el-tree
:data="data2"
@ -586,9 +586,9 @@ Tree nodes can be initially expanded or checked
```
:::
### Checking tree nodes
### Seleccionando nodos
::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo haces por claves el atributo `node-key` es necesario.
```html
<el-tree
:data="data2"
@ -682,10 +682,10 @@ Tree nodes can be initially expanded or checked
```
:::
### Custom node content
The content of tree nodes can be customized, so you can add icons or buttons as you will
### Contenido personalzado en los nodos
El contenido de los nodos puede ser personalizado, así que puedes añadir iconos y botones a tu gusto.
::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. 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 Utiliza `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mira la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
```html
<el-tree
:data="data4"
@ -779,10 +779,10 @@ The content of tree nodes can be customized, so you can add icons or buttons as
```
:::
### Tree node filtering
Tree nodes can be filtered
### Filtrado de nodos
Los nodos del árbol se pueden filtrar.
::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
:::demo Invoca el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Ten en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
```html
<el-input
placeholder="Filter keyword"
@ -862,9 +862,9 @@ Tree nodes can be filtered
```
:::
### Accordion
### Acordeón
Only one node among the same level can be expanded at one time.
Solo puede ser expandido un nodo del mismo nivel a la vez.
::: demo
```html
@ -930,56 +930,55 @@ Only one node among the same level can be expanded at one time.
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
| data | tree data | array | — | — |
| empty-text | text displayed when data is void | string | — | — |
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
| props | configuration options, see the following table | object | — | — |
| load | method for loading subtree data | function(node, resolve) | — | — |
| render-content | render function for tree node | Function(h, { node, data, store } | — | — |
| highlight-current | whether current node is highlighted | boolean | — | false |
| default-expand-all | whether to expand all nodes by default | boolean | — | false |
| expand-on-click-node | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | — | true | |
| auto-expand-parent | whether to expand father node when a child node is expanded | boolean | — | true |
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — |
| show-checkbox | whether node is selectable | boolean | — | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | boolean | — | false |
| default-checked-keys | array of keys of initially checked nodes | array | — | — |
| filter-node-method | this function will be executed on each node when use filter method. if return `false`, tree node will be hidden. | Function(value, data, node) | — | — |
| accordion | whether only one node among the same level can be expanded at one time | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default |
| - | - | - | - | -|
| data | Datos del árbol | array | — | — |
| empty-text | Texto a mostrar cuando data es void | string | — | — |
| node-key | Identificador único en todo el árbol para los nodos | string | — | — |
| props | Opciones de configuración | object | — | — |
| load | Método para cargar los datos de subárboles | function(node, resolve) | — | — |
| render-content | Función de renderizado para los nodos | Function(h, { node, data, store }| — | — |
| highlight-current | Si el nodo actual está resaltado | boolean | — | false |
| default-expand-all | Expandir todos los nodos por defecto | boolean | — | false |
| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - |
| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
| show-checkbox | Si un nodo es seleccionable | boolean | — | false |
| check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false |
| default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — |
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
| accordion | Dice si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
### props
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ---------------------------------------- | ------ | --------------- | ------- |
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — |
| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — |
| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — |
| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — |
| Atributo | Descripción | Tipo | Valores aceptados | Default |
| - | -| - | - | - |
| label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — |
| children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — |
| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
### Method
`Tree` has the following method, which returns the currently selected array of nodes.
| Method | Description | Parameters |
| --------------- | ---------------------------------------- | ---------------------------------------- |
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
| updateKeyChildren | set new data to node, only works when `node-key` is assigned | (key, data) Accept two parameters: 1. key of node 2. new data |
| getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
| setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked |
| getCheckedKeys | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
| setCheckedKeys | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
| setChecked | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
| getCurrentKey | return the highlight node's key (null if no node is highlighted) | — |
| getCurrentNode | return the highlight node (null if no node is highlighted) | — |
| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted |
| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
### Métodos
`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
| Método | Descripción | Parámetros |
| - | - | - |
| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false`|
| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar |
| getCheckedKeys | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |
| setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado| (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado|
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
### Events
| Event Name | Description | Parameters |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself |
| check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes |
| current-change | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode |
| node-expand | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
| node-collapse | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
### Eventos
| Nombre del evento | Descripción | Parámetros |
| - | - | - |
| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |