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 ## 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 @@
``` ```
::: :::
### 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.
### 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
### 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
``` ```
::: :::
### 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 |

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 ```html
<template> <template>
<div> <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 ```html
<template> <template>
<div> <div>
@ -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.
```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'

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

@ -286,11 +286,11 @@
## Tree ## 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 ::: demo
```html ```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 ```html
<el-tree <el-tree
:props="props" :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 ```html
<el-tree <el-tree
:props="props1" :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 ```html
<el-tree <el-tree
:data="data3" :data="data3"
@ -522,10 +522,10 @@ The checkbox of a node can be set as disabled.
``` ```
::: :::
### Default expanded and default checked ### Desplegado o seleccionado por defecto
Tree nodes can be initially expanded or checked 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 ```html
<el-tree <el-tree
:data="data2" :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 ```html
<el-tree <el-tree
:data="data2" :data="data2"
@ -682,10 +682,10 @@ Tree nodes can be initially expanded or checked
``` ```
::: :::
### Custom node content ### Contenido personalzado en los nodos
The content of tree nodes can be customized, so you can add icons or buttons as you will 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 ```html
<el-tree <el-tree
:data="data4" :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 ### Filtrado de nodos
Tree nodes can be filtered 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 ```html
<el-input <el-input
placeholder="Filter keyword" 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 ::: demo
```html ```html
@ -930,56 +930,55 @@ Only one node among the same level can be expanded at one time.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Default |
| --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- | | - | - | - | - | -|
| data | tree data | array | — | — | | data | Datos del árbol | array | — | — |
| empty-text | text displayed when data is void | string | — | — | | empty-text | Texto a mostrar cuando data es void | string | — | — |
| node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — | | node-key | Identificador único en todo el árbol para los nodos | string | — | — |
| props | configuration options, see the following table | object | — | — | | props | Opciones de configuración | object | — | — |
| load | method for loading subtree data | function(node, resolve) | — | — | | load | Método para cargar los datos de subárboles | function(node, resolve) | — | — |
| render-content | render function for tree node | Function(h, { node, data, store } | — | — | | render-content | Función de renderizado para los nodos | Function(h, { node, data, store }| — | — |
| highlight-current | whether current node is highlighted | boolean | — | false | | highlight-current | Si el nodo actual está resaltado | boolean | — | false |
| default-expand-all | whether to expand all nodes by default | boolean | — | false | | default-expand-all | Expandir todos los nodos por defecto | 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 | | | 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 | whether to expand father node when a child node is expanded | boolean | — | true | | auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
| default-expanded-keys | array of keys of initially expanded nodes | array | — | — | | default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
| show-checkbox | whether node is selectable | boolean | — | false | | show-checkbox | Si un nodo es seleccionable | boolean | — | false |
| check-strictly | whether checked state of a node not affects its father and child nodes when `show-checkbox` is `true` | 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 of keys of initially checked nodes | array | — | — | | default-checked-keys | Array con claves de los nodos seleccionados inicialmente | 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) | — | — | | 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 | whether only one node among the same level can be expanded at one time | boolean | — | false | | accordion | Dice si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
| indent | horizontal indentation of nodes in adjacent levels in pixels | number | — | 16 | | indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
### props ### props
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Default |
| --------- | ---------------------------------------- | ------ | --------------- | ------- | | - | -| - | - | - |
| label | specify which key of node object is used as the node's label | string, function(data, node) | — | — | | label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — |
| children | specify which node object is used as the node's subtree | string, function(data, node) | — | — | | children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — |
| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | — | — | | isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | — | — |
### Method ### Métodos
`Tree` has the following method, which returns the currently selected array of nodes. `Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
| Method | Description | Parameters | | Método | Descripción | Parámetros |
| --------------- | ---------------------------------------- | ---------------------------------------- | | - | - | - |
| filter | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method | | 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 | set new data to node, only works when `node-key` is assigned | (key, data) Accept two parameters: 1. key of node 2. new data | | 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 | 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. | | 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 | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked | | setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar |
| 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. | | 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 | 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. | | 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 | 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. | | 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 | return the highlight node's key (null if no node is highlighted) | — | | getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
| getCurrentNode | return the highlight node (null if no node is highlighted) | — | | getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
| setCurrentKey | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted | | setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado|
| setCurrentNode | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted | | setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre del evento | Descripción | Parámetros |
| -------------- | ---------------------------------------- | ---------------------------------------- | | - | - | - |
| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | | 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 | 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 | | 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 | triggers when current node changes | two parameters: node object corresponding to the current node, `node` property of TreeNode | | 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 | triggers when current node open | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself | | 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 | triggers when current node close | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself | | 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 |