Skip to content

E
Element
Commit 0de427a3 authored by Gonzalo Nandez's avatar Gonzalo Nandez Committed by island205
Browse files
Options

Doc: Update Spanish Doc 2.9.1 (#15840) 

* Update Spanish Doc 2.9.1

* Update Spanish Doc 2.9.1

* Update Spanish Doc 2.9.1

* doc: Update spanish doc 2.9.1
parent 4bc098b7
Show whitespace changes
Inline Side-by-side
Showing with 472 additions and 457 deletions
CHANGELOG.es.md
View file @ 0de427a3
......@@ -13,104 +13,104 @@
*2019-05-30*
#### New features
#### Nuevas características
- Table
- tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)
- tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event son compatibles con Tree Table (#15709 by @ziyoung)
#### Bug fixes
#### Corrección de errores
- Table
- Fix some bugs (#15709 by @ziyoung)
- Corrección de algunos errores (#15709 by @ziyoung)
- Theme
- Update api host (#15784 by @iamkun)
- Actualización del host de la api (#15784 by @iamkun)
#### Optimization
#### Optimización
- Chore
- Update InfiniteScroll type (#15794 by @iamkun)
- Tarea
- Una actualización del tipo InfiniteScroll (#15794 by @iamkun)
### 2.9.0
*2019-05-30*
#### New features
#### Nuevas características
- Backtop
- Add Backtop component (#15541 by @iamkun)
- Añadido componente Backtop (#15541 by @iamkun)
- PageHeader
- Add PageHeader component (#15714 by @ziyoung)
- Añadido el componente PageHeader (#15714 by @ziyoung)
- InfiniteScroll
- Add InfiniteScroll directive (#15567 by @iamkun)
- Añadida la directiva InfiniteScroll (#15567 by @iamkun)
- Cascader
- Add multiple mode and filter-method (#15611 by @SimonaliaChen)
- Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)
- Message
- Display in stack mode (#15639 by @island205)
- Visualización en modo stack (#15639 by @island205)
- Tag
- Add prop effect (#15725 by @SimonaliaChen)
- Añadido prop effect (#15725 by @SimonaliaChen)
- Tabs
- Left align title when type is card (#15695 by @luckyCao)
- Alinea el título a la izquierda cuando el tipo es card (#15695 by @luckyCao)
- DatePicker
- Support literal strings (#15525 by island205)
- Soporta cadenas literales (#15525 by island205)
- Image
- Add support for transmit attrs and listeners (#15578 by @VanMess)
- Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)
- Theme
- Add popup background (#15412 by @iamkun)
- Chore
- Update new 2.9.0 index page (#15682 by @iamkun)
- Añadido fondo al popup (#15412 by @iamkun)
- Tarea
- Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)
#### Bug fixes
#### Corrección de errores
- Table
- Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)
- Corregido el comportamiento de cambio de orden cuando la condición de orden es nula (#15012 by @joelxr)
- Image
- Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)
- Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)
- Input
- Fix show-word-count style in el-form (#15359 by @lvjiaxuan)
- Fix clear icon is not centered (#15354 by @YiiGuxing)
- Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan)
- Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)
- Calendar
- Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)
- Fix October disappear bug (#15394 by @qingdengyue)
- Corregido día de la semana no correcto cuando el día es domingo (#15399 by @qingdengyue)
- Corregido error de desaparición de octubre (#15394 by @qingdengyue)
- Tabs
- Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)
- Corrección de la pestaña básica anidada en el error de relleno de la pestaña de la tarjeta (#15461 by @SimonaliaChen)
- Tag
- Fix stop propagation problem (#15150 by @infjer)
- Corregido problema de propagación de stop (#15150 by @infjer)
- Form
- Fix input-group within form-item height error (#15457 by @SimonaliaChen)
- Fix resetFields issue (15181 by @luckyCao)
- Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)
- Solucionado el problema de resetFields (15181 by @luckyCao)
- Tooltip
- Fix custom tabindex not work (#15619 by @SimonaliaChen )
- Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )
- Link
- Fix link icon style class (#15752 by @iamkun)
- Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)
- Select
- Revert set value to null when cleared (#15447 by @iamkun)
- Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)
- Loading
- Fix dom not change when loading state change quickly (#15123 by @FAKER-A)
- Corregido dom no cambia cuando el estado de carga cambia rápidamente (#15123 by @FAKER-A)
- Switch
- Label with el-switch repeating event (#15178 by @FAKER-A)
- Etiqueta con el evento de repetición del interruptor (#15178 by @FAKER-A)
- Slider
- Fix style problem when clicking slider bar(#15561 by @luckyCao)
- Arreglado el problema de estilo al hacer clic en la barra deslizante (#15561 by @luckyCao)
- Radio
- Fix issue 14808 (#14809 by @OverTree)
- Solucionado el problema 14808 (#14809 by @OverTree)
- Form
- Fix resetFields issue (15181 by @luckyCao)
- Chore
- Upgrade dependencies and fix demo bug (#15324 by ziyoung)
- Solucionado el problema de resetFields (15181 by @luckyCao)
- Tarea
- Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)
- Type
- Fix loading type definition (#15635 by @iamkun)
- Fix Icon type (#15634 by @iamkun)
- Fix Link type definition (#15402 by @iamkun)
- Corregida la definición del tipo de carga (#15635 by @iamkun)
- Corregido tipo Icono (#15634 by @iamkun)
- Corregida la definición del tipo de enlace (#15402 by @iamkun)
#### Optimization
#### Optimización
- Cascader
- Refactor (#15611 by @SimonaliaChen)
- Chore
- Update make new component logic (by @iamkun)
- Docs
- Rename variable in docs (#15185 by @liupl)
- Fix image attribute type and default value (#15423 by @haoranyu)
- Fix form doc bug (#15228 by @SHERlocked93)
- Refractorización (#15611 by @SimonaliaChen)
- Tarea
- Actualización hacer nueva lógica de componentes (by @iamkun)
- Documentación
- Renombrar variable en docs (#15185 by @liupl)
- Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)
- Corregido error en la doc de form (#15228 by @SHERlocked93)
### 2.8.2
......@@ -186,7 +186,7 @@
- Arreglado el estilo del label (#14969 by @ziyoung)
- Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)
- Pagination
- Arreglaod que el slot no se actualizaba (#14711 by @lucyhao)
- Arreglado que el slot no se actualizaba (#14711 by @lucyhao)
- Table
- Arreglado un bug del load en el modo lazy (#15101 by @ziyoung)
- Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)
......
examples/docs/es/backtop.md
View file @ 0de427a3
## Backtop
A button to back to top
Un botón para volver a la parte superior
### Basic usage
### Uso básico
Scroll down to see the bottom-right button.
Desplácese hacia abajo para ver el botón en el lado inferior derecho.
:::demo
```html
......@@ -16,9 +16,9 @@ Scroll down to see the bottom-right button.
:::
### Customizations
### Personalización
Display area is 40px \* 40px.
Área de visualización de 40px \* 40px.
:::demo
```html
......@@ -44,17 +44,17 @@ Display area is 40px \* 40px.
:::
### Attributes
### Atributos
| Attribute | Description | Type | Accepted Values | Default |
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
| right | right distance | number | | 40 |
| bottom | bottom distance | number | | 40 |
| target | el objetivo para activar el scroll | string | | |
| visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number | | 200 |
| right | separación desde la derecha | number | | 40 |
| bottom | separación desde abajo | number | | 40 |
### Events
### Eventos
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | triggers when click | click event |
| Nombre del evento | Descripción | Parámetros |
| ----------------- | ----------------------- | ----------- |
| click | se activa al hacer clic | click event |
examples/docs/es/badge.md
View file @ 0de427a3
......@@ -122,3 +122,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
| hidden | oculta el badge | boolean | — | false |
| type | tipo de botón | string | primary / success / warning / danger / info | — |
examples/docs/es/breadcrumb.md
View file @ 0de427a3
......@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Uso básico
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.
```html
<el-breadcrumb separator="/">
......@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Breadcrumb atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
| separator | caracter separador | string | — | / |
| separator | carácter separador | string | — | / |
| separator-class | nombre de la clase del icono separador | string | — | - |
### Breadcrumb Item atributos
......
examples/docs/es/button.md
View file @ 0de427a3
......@@ -87,7 +87,7 @@ Botones sin borde ni fondo.
Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos personalizados.
```html
<el-button type="primary" icon="el-icon-edit"></el-button>
......@@ -132,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.
```html
<el-row>
......@@ -157,9 +157,10 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
| type | tipo de botón | string | primary / success / warning / danger / info / text | — |
| plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | boolean | — | false |
| circle | determina si es un boton circular | boolean | — | false |
| circle | determina si es un botón circular | boolean | — | false |
| loading | determinar si es o no un botón de descarga | boolean | — | false |
| disabled | deshabilitar el botón | boolean | — | false |
| icon | nombre de la clase del icono | string | — | — |
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |
examples/docs/es/calendar.md
View file @ 0de427a3
......@@ -2,7 +2,7 @@
Muestra fechas.
### Basico
### Básico
:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.
```html
......@@ -64,3 +64,4 @@ Muestra fechas.
|-----------------|-------------- |---------- |---------------------- |--------- |
| date | fecha que la celda representa | Date | — | — |
| data | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object | — | — |
examples/docs/es/card.md
View file @ 0de427a3
## Card
Muestra información dentro de un contenedor `card`
### Uso Basico
### Uso Básico
`Card` incluye titulo, contenido y operaciones.
......
examples/docs/es/carousel.md
View file @ 0de427a3
......@@ -48,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
### Indicadores
Los indicadores de paginacion pueden mostrarse fuera del carrusel
Los indicadores de paginación pueden mostrarse fuera del carrusel
:::demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta.
......@@ -184,7 +184,7 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
:::
### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
| height | Alto del carrusel | string | — | — |
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
......@@ -198,13 +198,13 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
| direction | direccion en la que se muestra el contenido | string | horizontal/vertical | horizontal |
### Eventos de Carousel
| Nombre evento | Descripción | Parametros |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| Nombre evento | Descripción | Parámetros |
| ------------- | ----------------------------------------- | ------------------------------------------------------------ |
| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
### Metodos de Carousel
| Metodos | Descripción | Parametros |
| ------------- | -------------------------- | ---------------------------------------- |
| Metodos | Descripción | Parámetros |
| ------------- | -------------------------- | ------------------------------------------------------------ |
| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
| prev | Cambia al slider anterior | — |
| next | Cambia al slider siguiente | — |
......
examples/docs/es/cascader.md
View file @ 0de427a3
## Cascader
If the options have a clear hierarchical structure, Cascader can be used to view and select them.
Si las opciones tienen una estructura jerárquica clara, se puede utilizar Cascader para verlas y seleccionarlas.
### Basic usage
### Uso básico
There are two ways to expand child option items.
Hay dos maneras de ampliar los elementos de opción hijos.
:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `props.expandTrigger` attribute defines how child options are expanded.
:::demo Asignar el atributo `options` a un array de opciones genera un Cascader. El atributo `props.expandTrigger` define cómo se expanden las opciones hijo.
```html
<div class="block">
<span class="demonstration">Child options expand when clicked (default)</span>
......@@ -236,11 +236,12 @@ There are two ways to expand child option items.
```
:::
### Disabled option
### Opción Disabled
Disable an option by setting a `disabled` field in the option object.
Deshabilite una opción estableciendo el campo `disabled` en las opciones del objeto.
:::demo En este ejemplo, el primer ítem en el array `options` tiene un campo `disabled: true`, por lo que está deshabilitado. De forma predeterminada, Cascader comprueba el campo `disabled` en cada objeto de las opciones; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props.disabled` (consulte la tabla de la API a continuación para obtener más detalles). Y por supuesto, el nombre de campo `value`, `label` y `children` también se pueden personalizar de la misma manera.
:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props.disabled` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
```html
<el-cascader :options="options"></el-cascader>
......@@ -451,9 +452,9 @@ Disable an option by setting a `disabled` field in the option object.
```
:::
### Clearable
### Limpiable
Set `clearable` attribute for `el-cascader` and a clear icon will appear when selected and hovered
Establezca el atributo `clearable` para `el-cascader` y aparecerá un icono de borrado cuando se seleccione y se pase el ratón por encima.
:::demo
```html
......@@ -665,11 +666,11 @@ Set `clearable` attribute for `el-cascader` and a clear icon will appear when se
```
:::
### Display only the last level
### Visualizar sólo el último nivel
The input can display only the last level instead of all levels.
La entrada puede mostrar sólo el último nivel en lugar de todos los niveles.
:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
:::demo El atributo `show-all-levels` define si se muestran todos los niveles. Si es `false`, sólo se muestra el último nivel.
```html
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
<script>
......@@ -878,11 +879,11 @@ The input can display only the last level instead of all levels.
```
:::
### Multiple Selection
### Selección múltiple
Set `props.multiple = true` to use multiple selection.
Establezca `props.multiple = true` para usar la selección múltiple.
:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
:::demo Cuando se utiliza la selección múltiple, todas las etiquetas seleccionadas se mostrarán de forma predeterminada, usted puede establecer `collapse-tags = true` para plegar las etiquetas seleccionadas.
```html
<div class="block">
<span class="demonstration">Display all tags (default)</span>
......@@ -982,11 +983,11 @@ Set `props.multiple = true` to use multiple selection.
:::
### Select any level of options
### Seleccione cualquier nivel de opciones
In single selection, only the leaf nodes can be checked, and in multiple selection, check parent nodes will lead to leaf nodes be checked eventually. When enable this feature, it can make parent and child nodes unlinked and you can select any level of options.
En la selección única, sólo se pueden comprobar los nodos de la hoja, y en la selección múltiple, los nodos padres de la comprobación conducirán a que los nodos de la hoja se comprueben con el tiempo. Cuando se activa esta función, puede hacer que los nodos padre e hijo se desacoplen y usted puede seleccionar cualquier nivel de opciones.
:::demo Set `props.checkStrictly = true` to make checked state of a node not affects its parent nodes and child nodes, and then you can select any level of options.
:::demo Establezca `props.checkStrictly = true` para que el estado comprobado de un nodo no afecte a sus nodos padre y nodos hijos, y entonces podrá seleccionar cualquier nivel de opciones.
```html
<div class="block">
<span class="demonstration">Select any level of options (Single selection)</span>
......@@ -1209,11 +1210,12 @@ In single selection, only the leaf nodes can be checked, and in multiple selecti
```
:::
### Dynamic loading
### Carga dinámica
Carga dinámica de sus nodos hijos cuando se selecciona un nodo.
Dynamic load its child nodes when checked a node.
:::demo Establezca `lazy = true` para utilizar la carga dinámica, y deberá especificar cómo cargar la fuente de datos mediante `lazyload`. Hay dos parámetros de `lazyload`, el primer parámetro `node` es el nodo en el que se hace clic actualmente, y el `resolve` es una llamada de retorno que indica que la carga ha terminado y que debe invocarse. Para mostrar el estado del nodo con mayor precisión, puede añadir un campo `leaf` (puede ser modificado por `props.leaf`) para indicar si se trata de un nodo de hoja. De lo contrario, se deducirá verificando si tiene algún nodo hijo.
:::demo Set `lazy = true` to use dynamic loading, and you have to specify how to load the data source by `lazyload`. There are two parameters of `lazyload`,the first parameter `node` is the node currently clicked, and the `resolve` is a callback that indicate loading is finished which must invoke. To display the status of node more accurately, you can add a `leaf` field (can be modified by `props.leaf`) to indicate whether it is a leaf node. Otherwise, it will be inferred by if has any child nodes.
```html
<el-cascader :props="props"></el-cascader>
......@@ -1246,11 +1248,12 @@ Dynamic load its child nodes when checked a node.
```
:::
### Filterable
### Filtrable
Buscar y seleccionar opciones con una palabra clave.
Search and select options with a keyword.
:::demo Añadir `filtrable` a `el-cascader` permite el filtrado. Cascader hará coincidir los nodos cuya etiqueta o etiqueta de padre (de acuerdo con `show-all-levels`) incluya una palabra clave de entrada. Por supuesto, puedes personalizar la lógica de búsqueda mediante el `filter-method` que acepta una función, el primer parámetro es `nodo`, el segundo es `keyword`, y necesitas devolver un valor booleano que indique si da en el blanco.
:::demo Adding `filterable` to `el-cascader` enables filtering. Cascader will match nodes whose label or parent's label (according to `show-all-levels`) includes input keyword. Of course, you can customize search logic by `filter-method` which accepts a function, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.
```html
<div class="block">
<span class="demonstration">Filterable (Single selection)</span>
......@@ -1474,11 +1477,11 @@ Search and select options with a keyword.
```
:::
### Custom option content
### Contenido de opciones personalizadas
You can customize the content of cascader node.
Puede personalizar el contenido del nodo de cascada.
:::demo You can customize the content of cascader node by `scoped slot`. You'll have access to `node` and `data` in the scope, standing for the Node object and node data of the current node respectively。
:::demo Puede personalizar el contenido del nodo del cascader mediante `scoped slot`. Tendrá acceso a `node` y `data` en el ámbito de aplicación, representando el objeto Node y los datos del nodo actual respectivamente.
```html
<el-cascader :options="options">
<template slot-scope="{ node, data }">
......@@ -1693,11 +1696,11 @@ You can customize the content of cascader node.
```
:::
### Cascader panel
### Panel cascader
`CascaderPanel` is the core component of `Cascader` which has various of features such as single selection, multiple selection, dynamic loading and so on.
`CascaderPanel` es el componente central de `Cascader` que tiene varias características como selección única, selección múltiple, carga dinámica, etc.
:::demo Just like `el-cascader`, you can set alternative options by `options`, and enable other features by `props`, see the API form below for details.
:::demo Al igual que `el-cascader`, puede establecer opciones alternativas mediante `options`, y habilitar otras características mediante `props`, consulte el formulario de la API a continuación para obtener más detalles.
```html
<el-cascader-panel :options="options"></el-cascader-panel>
......@@ -1907,70 +1910,70 @@ You can customize the content of cascader node.
```
:::
### Cascader Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de Cascader
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
| props | configuration options, see the following table. | object | — | — |
| size | size of input | string | medium / small / mini | — |
| placeholder | placeholder of input | string | — | Select |
| disabled | whether Cascader is disabled | boolean | — | false |
| clearable | whether selected value can be cleared | boolean | — | false |
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
| separator | option label separator | string | — | ' / ' |
| filterable | whether the options can be searched | boolean | — | — |
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
| popper-class | custom class name for Cascader's dropdown | string | — | — |
| value / v-model | valor ligado | - | — | — |
| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder del input | string | — | Select |
| disabled | si Cascader esta deshabilitada | boolean | — | false |
| clearable | si el valor seleccionado puede ser borrado | boolean | — | false |
| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | — |
| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — |
### Cascader Events
| Event Name | Description | Parameters |
### Eventos de Cascader
| Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | value |
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
| blur | triggers when Cascader blurs | (event: Event) |
| focus | triggers when Cascader focuses | (event: Event) |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
| remove-tag | triggers when remove tag in multiple selection mode | the value of the tag which is removed |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
| blur | se desencadena cuando Cascader se desenfoca | (event: Event) |
| focus | se activa cuando Cascader se enfoca | (event: Event) |
| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
### Cascader Slots
| Slot Name | Description |
### Slots de Cascader
| Nombre del slot | Descripción |
|---------|-------------|
| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
| empty | content when there is no matched options. |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| empty | cuando no hay opciones coincidentes. |
### CascaderPanel Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos del CascaderPanel
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`.| array | — | — |
| props | configuration options, see the following table. | object | — | — |
| value / v-model | valor ligado | - | — | — |
| options | datos de las opciones，las claves `value` y `label` pueden ser personalizadas por `Props`. | array | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
### CascaderPanel Events
| Event Name | Description | Parameters |
### Eventos de CascaderPanel
| Nombre de los evetos | Descripción | Parámetros |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | value |
| expand-change | triggers when expand option changes | an array of the expanding node's parent nodes |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
### CascaderPanel Slots
| Slot Name | Description |
### Slots de CascaderPanel
| Nombre del slot | Descripción |
|---------|-------------|
| - | the custom content of cascader node, the parameter is { node, data }, which are current Node object and node data respectively. |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
### Props
| Attribute | Description | Type | Accepted Values | Default |
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ----------------- | ------ | ------ | ------ |
| expandTrigger | trigger mode of expanding options | string | click / hover | 'click' |
| multiple | whether multiple selection is enabled | boolean | - | false |
| checkStrictly | whether checked state of a node not affects its parent and child nodes | boolean | - | false |
| emitPath | when checked nodes change, whether to emit an array of node's path, if false, only emit the value of node. | boolean | - | true |
| lazy | whether to dynamic load child nodes, use with `lazyload` attribute | boolean | - | false |
| lazyLoad | method for loading child nodes data, only works when `lazy` is true | function(node, resolve) | - | - |
| value | specify which key of node object is used as the node's value | string | — | 'value' |
| label | specify which key of node object is used as the node's label | string | — | 'label' |
| children | specify which key of node object is used as the node's children | string | — | 'children' |
| disabled | specify which key of node object is used as the node's disabled | string | — | 'disabled' |
| leaf | specify which key of node object is used as the node's leaf field | string | — | 'leaf' |
| expandTrigger | modo de disparo de las opciones de ampliación | string | click / hover | 'click' |
| multiple | si la selección múltiple esta activada | boolean | - | false |
| checkStrictly | si el estado verificado de un nodo no afecta a sus nodos padre e hijo | boolean | - | false |
| emitPath | cuando los nodos marcados cambian, si emitir o no un array de la ruta de un nodo, si es falso, sólo emite el valor del nodo. | boolean | - | true |
| lazy | si se deben cargar dinámicamente nodos hijo, usarlo con el atributo `lazyload`. | boolean | - | false |
| lazyLoad | para cargar datos de nodos hijo, sólo funciona cuando `lazy` es verdadero | function(node, resolve) | - | - |
| value | especificar qué clave de objeto de nodo se utiliza como valor del nodo | string | — | 'value' |
| label | especificar qué clave de objeto de nodo se utiliza como etiqueta del nodo | string | — | 'label' |
| children | especificar qué clave de objeto de nodo se utiliza como hijo del nodo | string | — | 'children' |
| disabled | especificar qué clave de objeto de nodo se utiliza como nodo desactivado | string | — | 'disabled' |
| leaf | especificar qué clave de objeto de nodo se utiliza como campo de hoja del nodo | string | — | 'leaf' |
examples/docs/es/checkbox.md
View file @ 0de427a3
......@@ -51,9 +51,9 @@ Estado deshabilitado para el checkbox.
### Grupo de Checkboxes
Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
:::demo El elemento `checkbox-group` puede manejar múltiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
```html
<template>
......@@ -248,7 +248,7 @@ Checkbox con estilo tipo Botón.
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
| name | atributo 'name' nativo | string | — | — |
| name | atributo `name` nativo | string | — | — |
| checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
......
examples/docs/es/color-picker.md
View file @ 0de427a3
......@@ -30,7 +30,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
### Alpha
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agregue el atributo `show-alpha`.
```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
......@@ -46,9 +46,9 @@ ColorPicker es un selector de color que soporta varios formatos de color.
```
:::
### Predefined colors
### Colores predefinidos
:::demo ColorPicker supports predefined color options
:::demo ColorPicker soporta opciones de color predefinidas
```html
<el-color-picker
v-model="color"
......
examples/docs/es/color.md
View file @ 0de427a3
......@@ -197,7 +197,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere
### Color neutro
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
......
examples/docs/es/container.md
View file @ 0de427a3
......@@ -13,7 +13,7 @@ De lo contrario, de forma horizontal.
`<el-footer>`: Contenedor para pie de página.
:::tip
Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
Estos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
:::
### Diseños comunes
......
examples/docs/es/custom-theme.md
View file @ 0de427a3
......@@ -34,7 +34,7 @@ Vue.use(Element)
```
:::tip
Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
Nota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
:::
### CLI para generar temas
......@@ -56,7 +56,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>Inicializar archivo de variables</strong>
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
```shell
et -i [custom output file]
......
examples/docs/es/date-picker.md
View file @ 0de427a3
......@@ -346,7 +346,7 @@ Preste atención a la capitalización
| `A` | AM/PM | solamente para `format`, mayusculas | AM |
| `a` | am/pm | solamente para `format`, minúsculas | am |
| `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |
| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |
| `[MM]` | No hay caracteres de escape | Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]). | MM |
:::demo
```html
......@@ -439,7 +439,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| disabled | si DatePicker esta deshabilitado | boolean | — | false |
| size | tamaño del input | string | large/small/mini | — |
| editable | si el input es editable | boolean | — | true |
| clearable | si se muestra el boton de borrado | boolean | — | true |
| clearable | si se muestra el botón de borrado | boolean | — | true |
| placeholder | placeholder cuando el modo NO es rango | string | — | — |
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
......@@ -459,10 +459,10 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
### Opciones del Picker
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- |
| -------------- | ------------------------------------------------------------ | ------------------------------ | ----------------- | ----------- |
| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
| firstDayOfWeek | primer dia de la semana | Number | 1 to 7 | 7 |
| firstDayOfWeek | primer día de la semana | Number | 1 to 7 | 7 |
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Accesso directo
......
examples/docs/es/datetime-picker.md
View file @ 0de427a3
......@@ -225,9 +225,9 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
### Accesos directos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |
| text | título del acceso directo | string | — | — |
| onClick | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
| onClick | la función se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
### Eventos
| Nombre de evento | Descripción | Parámetros |
......
examples/docs/es/dialog.md
View file @ 0de427a3
......@@ -242,7 +242,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
| Nombre de Evento | Descripcíon | Parámetros |
| ---------------- | ---------------------------------------- | ---------- |
| open | se activa cuando se abre el cuadro de Diálogo | — |
| opened | se activa cuando la animacion de apertura del Dialog termina. | — |
| opened | se activa cuando la animación de apertura del Dialog termina. | — |
| close | se dispara cuando el Diálogo se cierra | — |
| closed | se activa cuando finaliza la animación de cierre del Diálog | — |
examples/docs/es/form.md
View file @ 0de427a3
......@@ -6,7 +6,7 @@ Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formu
Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del ítem.
```html
<el-form ref="form" :model="form" label-width="120px">
......@@ -389,7 +389,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
:::
:::tip
Custom validate callback function must be called. See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
:::
### Eliminar o agregar validaciones dinamicamente
......@@ -473,7 +473,7 @@ Custom validate callback function must be called. See more advanced usage at [as
### Validación numerica
:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
......@@ -606,22 +606,22 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| model | Datos del componente | object | — | — |
| rules | Reglas de validación | object | — | — |
| inline | Si el form es inline | boolean | — | false |
| label-position | Posicion de la etiqueta | string | left / right / top | right |
| label-width | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported. | string | — | — |
| label-position | Posición de la etiqueta | string | left / right / top | right |
| label-width | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string | — | — |
| label-suffix | sufijo de la etiqueta | string | — | — |
| hide-required-asterisk | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
| validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | — | true |
| validate-on-rule-change | si se dispara la validación cuando el prop `rules` cambia | boolean | — | true |
| size | el tamaño de los componentes en este form | string | medium / small / mini | — |
| disabled | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | — | false |
### Form Metodos
| Metodo | Descripción | Parametros |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| validate | el método para validar todo el formulario. Recibe una llamada como parametro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| validate | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| validateField | validar uno o varios elementos de formulario | Function(props: string \| array, callback: Function(errorMessage: string)) |
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \| array) |
......@@ -631,17 +631,17 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| Nombre | Descripción | Parametros |
| -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no, y el mensaje de error si existe. |
| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
### Form-Item Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
| prop | un clave del modelo. En el uso del método validate and resetFields, el atributo es obligatorio. | string | Clave del modelo que se ha pasado a `form` | |
| prop | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string | Clave del modelo que se ha pasado a `form` | |
| label | etiqueta | string | — | — |
| label-width | ancho de la etiqueta, e.g. '50px'. Width `auto` is supported | string | — | — |
| label-width | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string | — | — |
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
| rules | reglas de validacion del form | object | — | — |
| rules | reglas de validación del form | object | — | — |
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | mensaje de validación estilo inline | boolean | — | false |
......@@ -657,12 +657,12 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
### Form-Item Scoped Slot
| Name | Description |
| ----- | -------------------------------------------------------------------------------------------------- |
| error | Contenido personalizado para mostrar el mensaje de validacion. El parametro del scope es { error } |
| ----- | ------------------------------------------------------------ |
| error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |
### Form-Item Metodo
| Metodo | Descripción | Parametros |
| ------------- | ----------------------------------------------------------- | ---------- |
| resetField | restablecer campo actual y eliminar resultado de validación | — |
| clearValidate | elimina el estado de la validacion de un campo | - |
| clearValidate | elimina el estado de la validación de un campo | - |
examples/docs/es/i18n.md
View file @ 0de427a3
......@@ -39,7 +39,7 @@ webpack.config.js
## Compatible con `vue-i18n@5.x`
Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.
```javascript
import Vue from 'vue'
......
examples/docs/es/image.md
View file @ 0de427a3
......@@ -62,7 +62,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
### Fallo de carga
:::demo Personalice el contenido cuando ocurra algun error al cargar la imagen via `slot = error`
:::demo Personalice el contenido cuando ocurra algún error al cargar la imagen vía `slot = error`
```html
<div class="demo-image__error">
<div class="block">
......@@ -114,7 +114,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| src | origen de la imagen, igual que en nativo | string | — | - |
| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
| alt | alt nativo | string | - | - |
| referrer-policy | referrerPolicy nativo | string | - | - |
| lazy | si se usara lazy load | boolean | — | false |
......
examples/docs/es/infiniteScroll.md
View file @ 0de427a3
## InfiniteScroll
Load more data while reach bottom of the page
Cargar más datos mientras se llega al final de la página
### Basic usage
Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
### Uso básico
Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.
:::demo
```html
<template>
<ul class="infinite-list" v-infinite-scroll="load">
......@@ -29,7 +30,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
```
:::
### Disable Loading
### Deshabilite Loading
:::demo
```html
......@@ -77,11 +78,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
:::
### Attributes
### Atributos
| Attribute | Description | Type | Accepted values | Default |
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | is disabled | boolean | - |false |
| infinite-scroll-delay | throttle delay (ms) | number | - |200 |
| infinite-scroll-distance| trigger distance (px) | number |- |0 |
| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |
| infinite-scroll-disabled | si esta disabled | boolean | - |false |
| infinite-scroll-delay | retraso en milisegundos | number | - |200 |
| infinite-scroll-distance| distancia de activación (px) | number |- |0 |
| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
examples/docs/es/input.md
View file @ 0de427a3
......@@ -155,7 +155,7 @@ export default {
### Textarea
Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
Redimensiona para introducir varias líneas de información de texto. Agregue el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
:::demo Controle la altura ajustando el prop `rows`.
......@@ -180,9 +180,9 @@ export default {
:::
### Textarea tamaño automatico
### Textarea tamaño automático
El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para auto dimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
:::demo
......@@ -579,18 +579,18 @@ export default {
| value / v-model | valor enlazado | boolean / string / number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
| minlength | igual que `minlength` en el input nativo | number | — | — |
| show-word-limit | Si se muesta el contador de palabras, solamente funciona con los tipos 'text' o 'textarea' | boolean | — | false |
| show-word-limit | Si se muestra el contador de palabras, solamente funciona con los tipos `text` o `textarea` | boolean | — | false |
| placeholder | placeholder del Input | string | — | — |
| clearable | si debe mostrar el boton de limpieza | boolean | — | false |
| show-password | si debe mostrar la posibilidad de conmutacion de password input | boolean | — | false |
| clearable | si debe mostrar el botón de limpieza | boolean | — | false |
| show-password | si debe mostrar la posibilidad de conmutación de password input | boolean | — | false |
| disabled | si esta deshabilitado | boolean | — | false |
| size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
| prefix-icon | clase del icono de prefijo | string | — | — |
| suffix-icon | clase del icono de sufijo | string | — | — |
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| rows | número de filas, sólo funciona cuando `type` es `textarea`. | number | — | 2 |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es `textarea`. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off |
| auto-complete | @DEPRECATED en el proximo cambio mayor de version | string | on/off | off |
| auto-complete | @DEPRECATED en el próximo cambio mayor de versión | string | on/off | off |
| name | igual que `name` en el input nativo | string | — | — |
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
| max | igual que `max` en el input nativo | — | — | — |
......@@ -600,7 +600,7 @@ export default {
| autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
| form | igual que `form` en el input nativo | string | — | — |
| label | texto de la etiqueta | string | — | — |
| tabindex | orden de tabulacion para el Input | string | - | - |
| tabindex | orden de tabulación para el Input | string | - | - |
### Input slots
......@@ -614,11 +614,11 @@ export default {
### Input eventos
| Nombre | Descripción | Parametros |
| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
| ------ | ------------------------------------------------------------ | ------------------------- |
| blur | Se dispara cuando se pierde el foco | (event: Event) |
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable". | — |
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo `clearable`. | — |
### Input Metodo
......@@ -664,14 +664,14 @@ export default {
### Autocomplete Scoped Slot
| Name | Description |
| ---- | ---------------------------------------------------------------------------------------- |
| — | Contenido personalizado para el input de sugerencias. El parametro del scope es { item } |
| ---- | ------------------------------------------------------------ |
| — | Contenido personalizado para el input de sugerencias. El parámetro del scope es { ítem } |
### Autocomplete Eventos
| Nombre | Descripción | Parametros |
| ------ | ------------------------------------------------ | ------------------------------------------- |
| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
| ------ | ----------------------------------------------- | ------------------------------------------ |
| select | se dispara cuando se hace clic a una sugerencia | sugerencia en la que se está haciendo clic |
### Autocomplete Metodo
......
examples/docs/es/installation.md
View file @ 0de427a3
......@@ -2,7 +2,7 @@
### npm
Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
Instalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/).
```shell
npm i element-ui -S
......@@ -31,4 +31,4 @@ Si esta usando un CDN, una página con Hello-World es fácil con Element. [Onlin
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
examples/docs/es/loading.md
View file @ 0de427a3
......@@ -66,7 +66,7 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
Puede personalizar el texto de carga, spinner de carga y color de fondo.
:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
:::demo Agregue el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
```html
<template>
<el-table
......
examples/docs/es/menu.md
View file @ 0de427a3
......@@ -256,7 +256,7 @@ NavMenu vertical puede ser colapsado.
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
| unique-opened | si solo un submenu puede ser activo | boolean | — | false |
| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | hover / click | hover |
| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
| router | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | — | false |
| collapse-transition | si se debe permitir collapse transition | boolean | — | true |
### Métodos Menu
......@@ -281,7 +281,7 @@ NavMenu vertical puede ser colapsado.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string/null | — | null |
| popper-class | nombre personalizado de la clase del menu popup | string | — | — |
| popper-class | nombre personalizado de la clase del menú popup | string | — | — |
| show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 |
| hide-timeout | tiempo de espera antes de ocultar un submenú | number | — | 300 |
| disabled | si esta `disabled` el sub-menu | boolean | — | false |
......
examples/docs/es/message-box.md
View file @ 0de427a3
## MessageBox
Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso.
Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar información, confirmar operaciones y mostrar mensajes de aviso.
:::tip
Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog.
Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilice el componente Dialog.
:::
### Alert
Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
:::demo Desplegar una alerta utilizando el método `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar clic fuera de la caja. En este ejemplo, dos parámetros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberías importar una librería de terceros de polyfill o utilizar callbacks.
```html
<template>
......@@ -38,10 +38,10 @@ Alert interrumpe las operaciones realizadas hasta que el usuario confirme la ale
### Confirm
Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
Confirm es utilizado para preguntar al usuario y recibir una confirmación.
:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso.
:::demo Llamando al método `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. También podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aquí utilizamos `Promise` para manejar posteriormente el proceso.
```html
<template>
......@@ -77,9 +77,9 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
### Prompt
Prompt es utilizado cuando se requiere entrada de informacion del usuario.
Prompt es utilizado cuando se requiere entrada de información del usuario.
:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
:::demo Llamando al método `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parámetro `inputPattern` para especificar tu propio patrón RegExp. Utiliza el parámetro `inputValidator` para especificar el método de validación, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validación a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes personalizar el atributo placeholder del input box con el parámetro `inputPlaceholder`.
```html
<template>
......@@ -117,7 +117,7 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
Puede ser personalizado para mostrar diversos contenidos.
:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
:::demo Los tres métodos mencionados anteriormente son un rempaquetado del método `$msgbox`. En este ejemplo se realiza una llamada al método `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el botón cancelar es mostrado en pantalla. Además podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del botón (el botón de confirmación también cuenta con estos campos, y podrá encontrar una lista completa de estos atributos al final de esta documentación). Este ejemplo también utiliza el atributo `beforeClose`. Es un método que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecución detendrá el cierre de la instancia. Tiene tres parámetros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el botón de confirmación; puede invocar el método `done` para cerrar la instancia del componente MessageBox (si el método `done` no es llamado dentro del atributo `beforeClose`, la instancia no podrá cerrarse).
```html
<template>
......@@ -197,7 +197,7 @@ El contenido de MessageBox puede ser `VNode`, permitiéndonos pasar componentes
:::
:::warning
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
:::
### Distinguir entre cancelar y cerrar
......@@ -242,7 +242,7 @@ En algunos casos, hacer clic en el botón Cancelar y en el botón Cerrar puede t
```
:::
### Centered content
### Contenido centrado
El contenido del componente MessageBox puede ser centrado.
:::demo Establecer `center` a `true` centrara el contenido
......@@ -279,9 +279,9 @@ El contenido del componente MessageBox puede ser centrado.
```
:::
### Metodos Globales
### Métodos Globales
Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son:
Si Element fue importado completamente, agregara los siguientes métodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Así que en una instancia de Vue puedes llamar el método `MessageBox` como lo que hicimos en esta pagina. Los parámetros son:
- `$msgbox(options)`
- `$alert(message, title, options)` or `$alert(message, options)`
- `$confirm(message, title, options)` or `$confirm(message, options)`
......@@ -295,7 +295,7 @@ Si prefieres importar `MessageBox` cuando lo necesites (on demand):
import { MessageBox } from 'element-ui';
```
Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores.
Los métodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parámetros son los mismos que los anteriores.
### Opciones
......@@ -306,26 +306,26 @@ Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.conf
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false |
| type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — |
| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
| customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — |
| customClass | nombre de la clase personalizada para el componente MessageBox | string | — | — |
| callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — |
| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
| distinguishCancelAndClose | si se debe distinguir entre cancelar y cerrar | boolean | — | false |
| lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true |
| showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) |
| showConfirmButton | utlizado para mostrar un boton confirmar | boolean | — | true |
| cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel |
| confirmButtonText | contenido de texto del boton confirmar | string | — | OK |
| cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — |
| confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — |
| closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) |
| closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) |
| showCancelButton | utilizado para mostrar un botón cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) |
| showConfirmButton | utilizado para mostrar un botón confirmar | boolean | — | true |
| cancelButtonText | contenido de texto del botón cancelar | string | — | Cancel |
| confirmButtonText | contenido de texto del botón confirmar | string | — | OK |
| cancelButtonClass | nombre de la clase personalizada del botón cancelar | string | — | — |
| confirmButtonClass | nombre de la clase personalizada del botón confirmar | string | — | — |
| closeOnClickModal | utilizado para que que el componente MessageBox pueda ser cerrado al dar clic en la mascara | boolean | — | true (false cuando es llamado con alert) |
| closeOnPressEscape | utilizado para que que el componente MessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) |
| closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true |
| showInput | utilizado para mostrar el componente input | boolean | — | false (true cuando es llamado con prompt) |
| inputPlaceholder | placeholder para el componente input | string | — | — |
| inputType | tipo del componente input | string | — | text |
| inputValue | valor inicial del componente input | string | — | — |
| inputPattern | regexp del componente input | regexp | — | — |
| inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — |
| inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input |
| inputValidator | función de validación del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — |
| inputErrorMessage | mensaje de error cuando la validación falla | string | — | Illegal input |
| center | utilizado para alinear el contenido al centro | boolean | — | false |
| roundButton | utilizado para redondear el boton | boolean | — | false |
| roundButton | utilizado para redondear el botón | boolean | — | false |
examples/docs/es/message.md
View file @ 0de427a3
## Message
Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
Utilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.
### Uso basico
### Uso básico
Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.
:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
:::demo La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.
```html
<template>
......@@ -38,9 +38,9 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
### Tipos
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
Utilizados para mostrar retroalimentación de Success, Warning, Message y Error activities.
:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
:::demo Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
```html
<template>
<el-button :plain="true" @click="open2">success</el-button>
......@@ -80,9 +80,9 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
### Closable
Un boton para cerrar que puede ser agregado.
Un botón para cerrar que puede ser agregado.
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atributo `duration` que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a `0`.
```html
<template>
<el-button :plain="true" @click="open1">message</el-button>
......@@ -130,7 +130,7 @@ Un boton para cerrar que puede ser agregado.
```
:::
### Centered text
### Texto centrado
Utiliza el atributo `center` para centrar el texto.
:::demo
......@@ -181,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto.
:::
:::warning
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
:::
### Metodos Globales
### Métodos Globales
Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
......@@ -196,7 +196,7 @@ Import `Message`:
import { Message } from 'element-ui';
```
En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
### Options
| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
......@@ -206,14 +206,15 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr
| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false |
| customClass | nombre de clase personalizado para el componente Message | string | — | — |
| duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 |
| showClose | utilizado para mostrar un boton para cerrar | boolean | — | false |
| duration | muestra la duración,en milisegundos. si se establece en 0, este no se apagara automáticamente | number | — | 3000 |
| showClose | utilizado para mostrar un botón para cerrar | boolean | — | false |
| center | utilizado para centrar el texto | boolean | — | false |
| onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — |
| offset | set the distance to the top of viewport | number | — | 20 |
| onClose | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function | — | — |
| offset | La distancia desde la parte superior del viewport | number | — | 20 |
### Metodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
| Metodo | Descripcion |
### Métodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.
| Método | Descripción |
| ------ | ---------------------------- |
| close | cierra el componente Message |
examples/docs/es/notification.md
View file @ 0de427a3
......@@ -113,7 +113,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
```
:::
### Posicion personalizada
### Posición personalizada
La notificación puede surgir de cualquier rincón que uno desee.
......@@ -280,7 +280,7 @@ Es posible ocultar el botón de cerrar
```
:::
### Metodo global
### Método global
Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
......@@ -292,26 +292,26 @@ Importar `Notification`:
import { Notification } from 'element-ui';
```
En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias.
En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.
### Opciones
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
| ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |
| title | titulo | string | — | — |
| message | mensaje | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false |
| type | tipo de notificacion | string | success/warning/info/error | — |
| type | tipo de notificación | string | success/warning/info/error | — |
| iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — |
| customClass | nombre de clase personalizado para la notificacion | string | — | — |
| duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 |
| position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | si se muestra el boton de cerrar | boolean | — | true |
| onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — |
| onClick | funcion que se ejecuta cuando se hace click en la notificación | function | — | — |
| customClass | nombre de clase personalizado para la notificación | string | — | — |
| duration | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number | — | 4500 |
| position | posición personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | si se muestra el botón de cerrar | boolean | — | true |
| onClose | función que se ejecuta cuando la notificación se cierra | function | — | — |
| onClick | función que se ejecuta cuando se hace clic en la notificación | function | — | — |
| offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 |
### Metodos
`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
### Métodos
`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
| Metodo | Descripción |
| ------ | ---------------------- |
......
examples/docs/es/page-header.md
View file @ 0de427a3
## PageHeader
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
Si la ruta de la página es simple, se recomienda utilizar PageHeader en lugar de Breadcrumb.
### Basic
### Básico
:::demo
```html
......@@ -18,22 +18,26 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
}
}
</script>
```html
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |------------------------------ | ------ |
| title | main title | string | — | Back |
| content | content | string | — | — |
| title | titulo principal | string | — | Back |
| content | contenido | string | — | — |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre evento | Descripción | Parámetros |
|----------- |-------------- |----------- |
| back | triggers when right side is clicked | — |
| back | se activa cuando se hace clic en el lado derecho | — |
### Slots
| slot | Description |
|---------- | ---------------------- |
| title | title content |
| content | content |
| Nombre del slot | Descripción |
| --------------- | ----------- |
| title | titulo |
| content | contenido |
```
```
\ No newline at end of file
examples/docs/es/pagination.md
View file @ 0de427a3
......@@ -22,7 +22,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
```
:::
### Numeros de paginas
### Números de paginas
:::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.
```html
......@@ -51,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado.
### Más elementos
Agrega más modulos basados en su escenario.
Agrega más módulos basados en su escenario.
:::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
......@@ -177,8 +177,8 @@ Cuando sólo hay una página, oculte la paginación configurando el atributo `hi
| ----------------- | --------------------------------------- | ----------------------------- |
| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` |
| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
| prev-click | Se dispara cuando el boton `prev` recibe el click y la pagina actual cambia | la nueva pagina actual |
| next-click | Se dispara cuando el boton `next` recibe el click y la pagina actual cambia | la nueva pagina actual |
| prev-click | Se dispara cuando el botón `prev` recibe el clic y la pagina actual cambia | la nueva pagina actual |
| next-click | Se dispara cuando el botón `next` recibe el clic y la pagina actual cambia | la nueva pagina actual |
### Slot
| Nombre | Descripción |
......
examples/docs/es/popover.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), o usando la directiva `v-popover` y poniendo el `ref` de Popover.
```html
<template>
......@@ -146,12 +146,12 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| disabled | si el popover está deshabilitado | boolean | — | false |
| value / v-model | si el popover está visible | Boolean | — | false |
| offset | popover offset | number | — | 0 |
| transition | popover transition animation | string | — | el-fade-in-linear |
| transition | animación de transición del popover | string | — | el-fade-in-linear |
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
### Slot
| Nombre | Descripción |
......@@ -163,6 +163,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| Nombre del evento | Descripción | Parámetros |
| ----------------- | --------------------------------------- | ---------- |
| show | se dispara cuando se muestra el popover | — |
| after-enter | se dispara cuando la transicion de entrada termina | — |
| after-enter | se dispara cuando la transición de entrada termina | — |
| hide | se dispara cuando se oculta el popover | — |
| after-leave | se dispara cuando la transicion de salida termina | — |
| after-leave | se dispara cuando la transición de salida termina | — |
examples/docs/es/progress.md
View file @ 0de427a3
......@@ -3,7 +3,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
### Barra de progreso lineal
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `format`.
```html
<el-progress :percentage="50"></el-progress>
......@@ -24,8 +24,8 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
```
:::
### Pporcentage interno
En este caso el porcentage no toma espacio adicional.
### Porcentaje interno
En este caso el porcentaje no toma espacio adicional.
:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```html
......@@ -36,9 +36,9 @@ En este caso el porcentage no toma espacio adicional.
```
:::
### Custom color
### Color personalizado
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
Puede utilizar el atributo `color` para establecer el color de la barra de progreso.
:::demo
......@@ -110,9 +110,9 @@ You can use `color` attr to set the progress bar color. it accepts color string,
```
:::
### Dashboard progress bar
### Barra de progreso del panel de control
:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
......
examples/docs/es/quickstart.md
View file @ 0de427a3
......@@ -18,7 +18,7 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
#### Importando todo
In main.js:
En main.js:
```javascript
import Vue from 'vue';
......@@ -233,7 +233,9 @@ Vue.prototype.$message = Message;
### Configuración global
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes.
La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal:
Importando Element completamente：
......@@ -253,7 +255,7 @@ Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
```
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.
### Empiece ya!
......
examples/docs/es/radio.md
View file @ 0de427a3
......@@ -178,7 +178,7 @@ Radio con estilo de botón.
| disabled | si el Radio está deshabilitado | boolean | — | false |
| border | agregar borde alrededor del elemento Radio | boolean | — | false |
| size | tamaño del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | — |
| name | atributo nativo 'name' | string | — | — |
| name | atributo nativo `name` | string | — | — |
### Atributos de Radio-button
......@@ -186,7 +186,7 @@ Radio con estilo de botón.
| -------- | ------------------------------ | --------------- | ---------------- | ----------- |
| label | el valor del Radio | string / number | — | — |
| disabled | si el Radio está deshabilitado | boolean | — | false |
| name | atributo nativo 'name' | string | — | — |
| name | atributo nativo `name` | string | — | — |
### Atributos de Radio-group
......@@ -194,7 +194,7 @@ Radio con estilo de botón.
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
| value / v-model | valor enlazado | string / number / boolean | — | — |
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
| disabled | si la anidación de radios está desahabilitada | boolean | — | false |
| disabled | si la anidación de radios está deshabilitada | boolean | — | false |
| text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
| fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |
......
examples/docs/es/rate.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@ Usado para la calificación
### Uso básico
:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.
```html
......@@ -122,7 +122,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
| allow-half | si escoger media estrella está permitido | boolean | — | false |
| low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 |
| high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 |
| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| colors | colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 |
| icon-classes | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
......
examples/docs/es/select.md
View file @ 0de427a3
......@@ -541,16 +541,16 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
| size | tamaño del Input | string | large/small/mini | — |
| clearable | si el select puede ser limpiado | boolean | — | false |
| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| multiple-limit | máximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| name | el atributo `name` del input seleccionado | string | — | — |
| autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off |
| auto-complete | @DEPRECATED en la proxima major version | string | — | off |
| auto-complete | @DEPRECATED en la proxima major versión | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | si Select es filtrable | boolean | — | false |
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
| filter-method | metodo de filtrado personalizado | function | — | — |
| remote | si las opciones se traeran desde el servidor | boolean | — | false |
| remote-method | metodo de busqueda remota personalizada | function | — | — |
| filter-method | método de filtrado personalizado | function | — | — |
| remote | si las opciones se traerán desde el servidor | boolean | — | false |
| remote-method | método de búsqueda remota personalizada | function | — | — |
| loading | si Select está cargando datos del servidor | boolean | — | false |
| loading-text | texto mostrado durante la carga de datos del servidor, también puedes usar la configuración de slot = "empty" | string | — | Loading |
| no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. También puedes usar la configuración de slot = "empty" | string | — | No matching data |
......@@ -563,10 +563,10 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
### Eventos Select
| Nombre | Descripción | Parametros |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| -------------- | ------------------------------------------------------------ | ----------------------------------------- |
| change | se dispara cuando el valor del select cambia | valor actual del select |
| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
| visible-change | se dispara cuando el menú desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| remove-tag | se dispara cuando un tag es removido en modo múltiple | el valor del tag removido |
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
| blur | se dispara cuando el input pierde el foco | (event: Event) |
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
......
examples/docs/es/slider.md
View file @ 0de427a3
......@@ -93,7 +93,7 @@ Las opciones pueden ser discretas.
### Slider con input
Inserte el valor a traves de un input
Inserte el valor a través de un input
:::demo Configure el atributo `show-input` para que muestre un input a la derecha.
......@@ -217,11 +217,11 @@ Se soporta la selección de un rango de valores.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
| value / v-model | valor enlazado | number | — | 0 |
| min | valor minimo | number | — | 0 |
| min | valor mínimo | number | — | 0 |
| max | valor máximo | number | — | 100 |
| disabled | si el Slider esta deshabitado | boolean | — | false |
| step | tamaño del paso | number | — | 1 |
| show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
| show-input | Si se muestra el input, trabaja cuando `range`es false | boolean | — | false |
| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
| input-size | tamaño del input | string | large / medium / small / mini | small |
| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
......
examples/docs/es/steps.md
View file @ 0de427a3
......@@ -35,11 +35,11 @@ Barra de pasos simple.
```
:::
### Step bar con el status
### Step bar con el estatus
Muestra el estado del step para cada paso.
:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
```html
<el-steps :space="200" :active="1" finish-status="success">
......@@ -79,7 +79,7 @@ Puede poner una descripción para cada paso.
```
:::
### Step bar with icon
### Step bar con icono
En la barra de pasos se pueden utilizar diversos iconos personalizados.
......@@ -134,12 +134,12 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
### Steps atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
| -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
| direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | actual paso de activación | number | — | 0 |
| process-status | status del paso actual | string | wait / process / finish / error / success | process |
| finish-status | status del paso final | string | wait / process / finish / error / success | finish |
| process-status | estatus del paso actual | string | wait / process / finish / error / success | process |
| finish-status | estatus del paso final | string | wait / process / finish / error / success | finish |
| align-center | centrado de título y descripción | boolean | — | false |
| simple | si aplicar un tema simple | boolean | - | false |
......@@ -156,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
| ----------- | -------------------- |
| icon | Icono personalizado |
| title | Titulo del paso |
| description | Descripcion del paso |
| description | Descripción del paso |
examples/docs/es/switch.md
View file @ 0de427a3
## Switch
Switch es utilizdo para realizar cambios entre dos estados opuestos.
Switch es utilizado para realizar cambios entre dos estados opuestos.
### Uso básico
......@@ -121,8 +121,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
| value / v-model | valor enlazado | boolean / string / number | — | — |
| disabled | si Switch esta deshabilitado | boolean | — | false |
| width | ancho del componente Switch | number | — | 40 |
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | — |
| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string | — | — |
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobrescribe `active-text` | string | — | — |
| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobrescribe `inactive-text` | string | — | — |
| active-text | texto mostrado en el estado `on` | string | — | — |
| inactive-text | texto mostrado en el estado `off` | string | — | — |
| active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true |
......
examples/docs/es/table.md
View file @ 0de427a3
......@@ -1089,7 +1089,7 @@ Filtra la tabla para encontrar la información que necesita.
Personalice la columna de la tabla para que pueda integrarse con otros componentes.
:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
:::demo Tiene acceso a la siguiente información: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots).
```html
<template>
<el-table
......@@ -1244,7 +1244,7 @@ Se puede personalizar el encabezado de la tabla para que se pueda adaptar aún m
### Fila expandible
Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la característica de fila expandible.
:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
```html
......@@ -1334,7 +1334,7 @@ Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de
### Datos tree y modo lazy
:::demo You can display tree structure data. When row contains the `children` field, it is treated as nested data. For rendering nested data, the prop `row-key` is required。Also, child row data can be loaded asynchronously. Set `lazy` property of Table to true and the function `load`. Specify `hasChildren` attribute in row to determine which row contains children. Both `children` and `hasChildren` can be configured via `tree-props`.
:::demo Puede visualizar datos de estructura de árbol. Cuando la fila contiene el campo `children`, se trata como datos anidados. Para renderizar datos anidados, la `row-key` es requerida。Ademas, los datos de las filas secundarias pueden ser cargados asincrónicamente. Poner la propiedad `lazy` de Table a true y la función `load`. Especifique el atributo `hasChildren` en la fila para determinar qué fila contiene descendencia. Tanto `children` como `hasChildren` pueden configurarse a través de `tree-props`.
```html
<template>
......@@ -1594,7 +1594,7 @@ Para una tabla de números, puede agregar una fila extra en el pie de página de
Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyendo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
```html
<template>
......@@ -1833,7 +1833,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, column, rowIndex, columnIndex})/Object | — | — |
| row-key | key de los datos de las filas, utilizada para optimizar el renderizado. Requerido si `reserve-selection` está activada o muestra los datos del árbol. Cuando su tipo es String, se admite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no se admite, en cuyo caso se debe utilizar la función. | Function(row)/String | — | — |
| empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String | — | No Data |
| default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false |
| default-expand-all | especifica si todas las filas se expanden por defecto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false |
| expand-row-keys | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array | — | |
| default-sort | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
| tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | |
......@@ -1844,8 +1844,8 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| select-on-indeterminate | controla el comportamiento del checkbox maestro en tablas de selección múltiple cuando sólo se seleccionan algunas filas (pero no todas). Si es true, todas las filas serán seleccionadas, de lo contrario deseleccionadas. | Boolean | — | true |
| indent | indentación horizontal de los datos en formato tree | Number | — | 16 |
| lazy | si se realiza un lazy loading de los datos | Boolean | — | — |
| load | metodo para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
| tree-props | configuration for rendering nested data | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
| load | método para cargar las filas de los hijos, solamente funciona cuando `lazy`es true | Function(row, treeNode, resolve) | — | — |
| tree-props | configuración para renderizar datos anidados | Object | — | { hasChildren: 'hasChildren', children: 'children' } |
### Eventos de la tabla
| Nombre del evento | Descripción | Parámetros |
......@@ -1860,21 +1860,21 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| row-click | se dispara cuando se hace clic en una fila | row, column, event |
| row-contextmenu | se dispara cuando el usuario hace clic derecho en una fila | row, column, event |
| row-dblclick | se dispara cuando se hace doble clic en una fila | row, column, event |
| header-click | se dispara cuando se hace click en una cabecera de columna | column, event |
| header-click | se dispara cuando se hace clic en una cabecera de columna | column, event |
| header-contextmenu | se dispara cuando el usuario hace clic derecho en una cabecera de columna | column, event |
| sort-change | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order } |
| filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters |
| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow |
| header-dragend | se dispara después de modificar el ancho de una columna arrastrando el borde de la cabecera. | newWidth, oldWidth, column, event |
| expand-change | triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded) | row, (expandedRows \| expanded) |
| expand-change | se activa cuando el usuario expande o colapsa una fila (para la tabla expansible, el segundo parámetro es expandedRows; para la tabla de árbol, el segundo parámetro es expanded) | row, (expandedRows \| expanded) |
### Métodos de la tabla
| Metodo | Descripción | Parametros |
| ------------------ | ---------------------------------------- | ------------- |
| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección | — |
| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
| toggleAllSelection | usado en Table de seleccion multiple, cambia los estados de seleccion de todas las filas. | - |
| toggleRowExpansion | used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
| toggleAllSelection | usado en Table de selección múltiple, cambia los estados de selección de todas las filas. | - |
| toggleRowExpansion | utilizado en la Tabla expandible o en la Tabla de árbol, conmutar si se desglosa una determinada línea. Con el segundo parámetro, se puede fijar directamente si esta línea se desglosa o se pliega | row, expanded |
| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row |
| clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
| clearFilter | Se utiliza para borrar todas las condiciones de filtro cuando no se pasan parámetros, los datos se restaurarán a un estado sin filtrar, o se puede pasar una matriz de columnas para borrar las condiciones de filtro de la columna especificada. | columnKey |
......@@ -1912,7 +1912,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — |
| reserve-selection | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection`. Note que `row-key` es requerido para que esto funcione | boolean | — | false |
| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — |
| filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — |
| filter-placement | colocación para el menú desplegable del filtro | String | same as Tooltip's `placement` | — |
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column) | — | — |
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |
......
examples/docs/es/tabs.md
View file @ 0de427a3
......@@ -289,13 +289,13 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ----------------------------- |
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace click al botón tab-add | — |
| ---------------- | ------------------------------------------------------------ | ----------------------------- |
| tab-click | se lanza cuando se hace clic a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace clic al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace clic al botón tab-add | — |
| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
### Attributos del Tab-pane
### Atributos del Tab-pane
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
| label | título de la pestaña | string | — | — |
......
examples/docs/es/tag.md
View file @ 0de427a3
......@@ -187,13 +187,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
| type | component type | string | success/info/warning/danger | — |
| type | tipo de Tag | string | success/info/warning/danger | — |
| closable | si el Tag puede ser removido | boolean | — | false |
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
| color | color de fondo del Tag | string | — | — |
| size | tamaño del Tag | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
| effect | Tema del Tag | string | dark / light / plain | light |
### Eventos
......
examples/docs/es/time-picker.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@ Use el Time Picker para input de tipo time.
### Selector de tiempo fijo
Provee una lista de tiempo fijo para que los usuarios escogan.
Provee una lista de tiempo fijo para que los usuarios escojan.
:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
```html
......
examples/docs/es/timeline.md
View file @ 0de427a3
......@@ -140,7 +140,7 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
|---------- |-------- |---------- |------------- |-------- |
| timestamp | Contenido de las marcas de tiempo | string | - | — |
| hide-timestamp | Si se muestra o no timestamp | boolean | — | false |
| placement | la posicion de timestamp | string | top / bottom | bottom |
| placement | la posición de timestamp | string | top / bottom | bottom |
| type | tipo de nodo | string | primary / success / warning / danger / info | - |
| color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |
| size | tamaño del nodo | string | normal / large | normal |
......@@ -149,5 +149,5 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
### Timeline-Item Slot
| name | Description |
|------|--------|
| — | Contenido personalizado del item del timeline |
| dot | Definicion personalizada del nodo |
| — | Contenido personalizado del ítem del timeline |
| dot | Definición personalizada del nodo |
examples/docs/es/tooltip.md
View file @ 0de427a3
......@@ -99,7 +99,7 @@ Tooltip tiene 9 colocaciones.
### Tema
Tooltip tiene dos temas: `dark` and `light`.
Tooltip tiene dos temas: `dark` y `light`.
:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
```html
......@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`.
Despliegue múltiples líneas de texto y establezca su formato.
:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
```html
<el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div>
......@@ -133,7 +133,7 @@ el atributo `transition` permite personalizar la animación con la que el Toolti
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
:::demo
```html
......@@ -168,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
```
:::
:::tip
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
......
examples/docs/es/transfer.md
View file @ 0de427a3
## Transfer
### 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 quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un 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 ítem, `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 quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
```html
<template>
<el-transfer
......@@ -38,7 +38,7 @@
Puede buscar y filtrar los items.
:::demo Ponga 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 puede implementar su 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.
:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
```html
<template>
<el-transfer
......@@ -81,9 +81,9 @@ Puede buscar y filtrar los items.
### Personalizable
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de estatus de la cabecera y el contenido del pie.
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar 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. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga 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.
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar 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. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga 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>
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
......@@ -238,7 +238,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Scoped Slot
| Name | Description |
|------|--------|
| — | Contenido personalizado para los datos de los items. El parametro del scope es { option } |
| — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |
### Methods
| Method | Description | Parameters |
......@@ -248,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Eventos
| Nombre | Descripcion | Parametros |
| ------ | ---------------------------------------- | ---------------------------------------- |
| 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 |
| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
| right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
examples/docs/es/transition.md
View file @ 0de427a3
......@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`.
:::demo
```html
<template>
<div>
......@@ -140,7 +141,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
```
:::
### On demand
### Bajo demanda
```js
// fade/zoom
......
examples/docs/es/tree.md
View file @ 0de427a3
......@@ -133,7 +133,7 @@ Usado para la selección de nodos.
```
:::
### Nodos hoja en modo perezoso
### Nodos hoja en modo perezoso (lazy load)
:::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 puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
```html
......@@ -183,7 +183,7 @@ Usado para la selección de nodos.
El checkbox de un nodo se puede poner como desactivado.
:::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.
:::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="data"
......@@ -399,7 +399,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
### Contenido personalizado en los nodos
El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
:::demo Hay dos maneras de personalizar la plantilla para los nodos de árbol: `render-content` y scoped slot. Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciones de renderizado. Si prefiere scoped slot, tendrá acceso a los `nodos` y `datos` en el ámbito de aplicación, representando el objeto TreeNode y los datos del nodo actual respectivamente. Tenga en cuenta que este ejemplo no puede ejecutarse en codepen.io ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
```html
<div class="custom-tree-container">
<div class="block">
......@@ -534,7 +534,7 @@ El contenido de los nodos puede ser personalizado, así que puede añadir iconos
### Filtrado de nodos
Los nodos del árbol se pueden filtrar.
:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parámetro es la palabra de filtrado. Tenga 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"
......@@ -800,15 +800,15 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
| 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 |
| check-strictly | El estado de selección 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 | — | — |
| current-node-key | la clave del nodo inicialmente seleccionado | string, number | — | — |
| 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) | — | — |
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
| accordion | 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 |
| icon-class | Icono del nodo del árbol de cliente | string | - | - |
| lazy | si se trata de un nodo de hoja lazy load, utilizado con el atributo `load` | boolean | — | false |
| draggable | si se habilita la función de drag and drop en los nodos | boolean | — | false |
| draggable | si se habilita la función de drag & drop en los nodos | boolean | — | false |
| allow-drag | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | — | — |
| allow-drop | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` tiene tres valores posibles: 'prev' (insertar el nodo de arrastre antes del nodo de destino), 'inner' (insertar el nodo de arrastre en el nodo de destino) y 'next' (insertar el nodo de arrastre después del nodo de destino) | Function(Nodoquesearrastra, Nododestino, type) | — | — |
......@@ -821,6 +821,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
### 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 |
......@@ -833,7 +834,7 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
| getHalfCheckedNodes | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de nodos actualmente seleccionada. | - |
| getHalfCheckedKeys | Si el nodo puede ser seleccionado (`show-checkbox` es `true`), devuelve la mitad del array de claves del nodo actualmente seleccionado. | - |
| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
| getCurrentNode | return the highlight node's data (null if no node is highlighted) | — |
| getCurrentNode | devuelve los datos del nodo de resaltado (nulo si no hay ningún nodo resaltado) | — |
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado. Si es `null`, cancela los nodos actualmente resaltados |
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
| getNode | devuelve el nodo por el dato o la clave | (data) los datos o clave del nodo |
......@@ -846,20 +847,20 @@ Puede arrastrar y soltar nodos de Tree añadiendo un atributo `draggable` .
| 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 |
| node-contextmenu | se lanza cuando en un nodo se hace click con el boton derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo click, la propiedad `node` del TreeNode, el TreeNode en si mismo |
| node-contextmenu | se lanza cuando en un nodo se hace clic con el botón derecho | cuatro parámetros: evento, el objeto nodo sobre el que se hizo clic, la propiedad `node` del TreeNode, el TreeNode en si mismo |
| 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 |
| check | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de status de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
| check | se activa al hacer clic en la casilla de selección de un nodo | dos parámetros: objeto de nodo correspondiente al nodo que se marca/desmarca, objeto de estatus de árbol verificado que tiene cuatro puntales: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys |
| 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 |
| node-drag-start | se activa cuando se inicia el arrastre | dos parametros: el objeto del nodo que se arrastrara, evento. |
| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parametros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parametros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
| node-drag-end | se activa cuando se termina de arrastrar | cuatro parametros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
| node-drop | después de soltar el nodo de arrastre | cuatro parametros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integracion (antes (before), despues (after), dentro (inner) ), evento. |
| node-drag-start | se activa cuando se inicia el arrastre | dos parámetros: el objeto del nodo que se arrastrara, evento. |
| node-drag-enter | se desencadena cuando el nodo de arrastre entra en otro nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo en el que entra, evento. |
| node-drag-leave | se desencadena cuando el nodo de arrastre sale de un nodo | tres parámetros: objeto del nodo que se arrastra, objeto del nodo del cual se sale, evento. |
| node-drag-over | se activa cuando se arrastra sobre un nodo (como el evento mouseover) | tres parámetros: objeto del nodo que se arrastra, objeto del nodo sobre el que esta el arrastre, evento. |
| node-drag-end | se activa cuando se termina de arrastrar | cuatro parámetros: objeto del nodo que se arrastra, objeto del nodo que corresponde al final del arrastre (puede ser `undefined` ), tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
| node-drop | después de soltar el nodo de arrastre | cuatro parámetros: objeto del nodo que se esta arrastrando, objeto del nodo sobre el que se esta soltando, tipo de integración (antes (before), después (after), dentro (inner) ), evento. |
### Scoped Slot
| Name | Description |
| Nombre | Descripción |
|------|--------|
| — | Contenido personalizado para nodos de tree. El parámetro del scope es { node, data }. |
examples/docs/es/upload.md
View file @ 0de427a3
......@@ -269,7 +269,7 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
| ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |
| action | obligatorio, URL de la petición | string | — | — |
| headers | cabeceras de la petición | object | — | — |
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
......@@ -286,12 +286,12 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
| on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
| on-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
| before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | — |
| before-remove | _hook_ lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList) | — | — |
| before-remove | _hook_ lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList) | — | — |
| thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false |
| file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
| list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
| auto-upload | se especifica si se autocargan archivos | boolean | — | true |
| http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| http-request | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
......
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