Commit 0de427a3 authored by Gonzalo Nandez's avatar Gonzalo Nandez Committed by island205

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
...@@ -13,104 +13,104 @@ ...@@ -13,104 +13,104 @@
*2019-05-30* *2019-05-30*
#### New features #### Nuevas características
- Table - 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 - Table
- Fix some bugs (#15709 by @ziyoung) - Corrección de algunos errores (#15709 by @ziyoung)
- Theme - Theme
- Update api host (#15784 by @iamkun) - Actualización del host de la api (#15784 by @iamkun)
#### Optimization #### Optimización
- Chore - Tarea
- Update InfiniteScroll type (#15794 by @iamkun) - Una actualización del tipo InfiniteScroll (#15794 by @iamkun)
### 2.9.0 ### 2.9.0
*2019-05-30* *2019-05-30*
#### New features #### Nuevas características
- Backtop - Backtop
- Add Backtop component (#15541 by @iamkun) - Añadido componente Backtop (#15541 by @iamkun)
- PageHeader - PageHeader
- Add PageHeader component (#15714 by @ziyoung) - Añadido el componente PageHeader (#15714 by @ziyoung)
- InfiniteScroll - InfiniteScroll
- Add InfiniteScroll directive (#15567 by @iamkun) - Añadida la directiva InfiniteScroll (#15567 by @iamkun)
- Cascader - Cascader
- Add multiple mode and filter-method (#15611 by @SimonaliaChen) - Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)
- Message - Message
- Display in stack mode (#15639 by @island205) - Visualización en modo stack (#15639 by @island205)
- Tag - Tag
- Add prop effect (#15725 by @SimonaliaChen) - Añadido prop effect (#15725 by @SimonaliaChen)
- Tabs - 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 - DatePicker
- Support literal strings (#15525 by island205) - Soporta cadenas literales (#15525 by island205)
- Image - Image
- Add support for transmit attrs and listeners (#15578 by @VanMess) - Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)
- Theme - Theme
- Add popup background (#15412 by @iamkun) - Añadido fondo al popup (#15412 by @iamkun)
- Chore - Tarea
- Update new 2.9.0 index page (#15682 by @iamkun) - Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)
#### Bug fixes #### Corrección de errores
- Table - 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 - Image
- Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen) - Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)
- Input - Input
- Fix show-word-count style in el-form (#15359 by @lvjiaxuan) - Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan)
- Fix clear icon is not centered (#15354 by @YiiGuxing) - Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)
- Calendar - Calendar
- Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue) - Corregido día de la semana no correcto cuando el día es domingo (#15399 by @qingdengyue)
- Fix October disappear bug (#15394 by @qingdengyue) - Corregido error de desaparición de octubre (#15394 by @qingdengyue)
- Tabs - 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 - Tag
- Fix stop propagation problem (#15150 by @infjer) - Corregido problema de propagación de stop (#15150 by @infjer)
- Form - Form
- Fix input-group within form-item height error (#15457 by @SimonaliaChen) - Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)
- Fix resetFields issue (15181 by @luckyCao) - Solucionado el problema de resetFields (15181 by @luckyCao)
- Tooltip - Tooltip
- Fix custom tabindex not work (#15619 by @SimonaliaChen ) - Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )
- Link - Link
- Fix link icon style class (#15752 by @iamkun) - Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)
- Select - Select
- Revert set value to null when cleared (#15447 by @iamkun) - Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)
- Loading - 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 - 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 - 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 - Radio
- Fix issue 14808 (#14809 by @OverTree) - Solucionado el problema 14808 (#14809 by @OverTree)
- Form - Form
- Fix resetFields issue (15181 by @luckyCao) - Solucionado el problema de resetFields (15181 by @luckyCao)
- Chore - Tarea
- Upgrade dependencies and fix demo bug (#15324 by ziyoung) - Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)
- Type - Type
- Fix loading type definition (#15635 by @iamkun) - Corregida la definición del tipo de carga (#15635 by @iamkun)
- Fix Icon type (#15634 by @iamkun) - Corregido tipo Icono (#15634 by @iamkun)
- Fix Link type definition (#15402 by @iamkun) - Corregida la definición del tipo de enlace (#15402 by @iamkun)
#### Optimization #### Optimización
- Cascader - Cascader
- Refactor (#15611 by @SimonaliaChen) - Refractorización (#15611 by @SimonaliaChen)
- Chore - Tarea
- Update make new component logic (by @iamkun) - Actualización hacer nueva lógica de componentes (by @iamkun)
- Docs - Documentación
- Rename variable in docs (#15185 by @liupl) - Renombrar variable en docs (#15185 by @liupl)
- Fix image attribute type and default value (#15423 by @haoranyu) - Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)
- Fix form doc bug (#15228 by @SHERlocked93) - Corregido error en la doc de form (#15228 by @SHERlocked93)
### 2.8.2 ### 2.8.2
...@@ -186,7 +186,7 @@ ...@@ -186,7 +186,7 @@
- Arreglado el estilo del label (#14969 by @ziyoung) - Arreglado el estilo del label (#14969 by @ziyoung)
- Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung) - Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)
- Pagination - Pagination
- Arreglaod que el slot no se actualizaba (#14711 by @lucyhao) - Arreglado que el slot no se actualizaba (#14711 by @lucyhao)
- Table - Table
- Arreglado un bug del load en el modo lazy (#15101 by @ziyoung) - 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) - Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)
......
## Backtop ## 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 :::demo
```html ```html
...@@ -16,9 +16,9 @@ Scroll down to see the bottom-right button. ...@@ -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 :::demo
```html ```html
...@@ -44,17 +44,17 @@ Display area is 40px \* 40px. ...@@ -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 | | | | target | el objetivo para activar el scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 | | visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number | | 200 |
| right | right distance | number | | 40 | | right | separación desde la derecha | number | | 40 |
| bottom | bottom distance | number | | 40 | | bottom | separación desde abajo | number | | 40 |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre del evento | Descripción | Parámetros |
| ---------- | ------------------- | ----------- | | ----------------- | ----------------------- | ----------- |
| click | triggers when click | click event | | click | se activa al hacer clic | click event |
...@@ -122,3 +122,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado. ...@@ -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 | | is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
| hidden | oculta el badge | boolean | — | false | | hidden | oculta el badge | boolean | — | false |
| type | tipo de botón | string | primary / success / warning / danger / info | — | | type | tipo de botón | string | primary / success / warning / danger / info | — |
...@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir ...@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Uso básico ### 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 ```html
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
...@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir ...@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Breadcrumb atributos ### Breadcrumb atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | 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 | — | - | | separator-class | nombre de la clase del icono separador | string | — | - |
### Breadcrumb Item atributos ### Breadcrumb Item atributos
......
...@@ -87,7 +87,7 @@ Botones sin borde ni fondo. ...@@ -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. 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 ```html
<el-button type="primary" icon="el-icon-edit"></el-button> <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 ...@@ -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. 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 ```html
<el-row> <el-row>
...@@ -157,9 +157,10 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici ...@@ -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 | — | | type | tipo de botón | string | primary / success / warning / danger / info / text | — |
| plain | determinar si es o no un botón plano | boolean | — | false | | plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | 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 | | loading | determinar si es o no un botón de descarga | boolean | — | false |
| disabled | deshabilitar el botón | boolean | — | false | | disabled | deshabilitar el botón | boolean | — | false |
| icon | nombre de la clase del icono | string | — | — | | icon | nombre de la clase del icono | string | — | — |
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false | | autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button | | native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
Muestra fechas. 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. :::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 ```html
...@@ -64,3 +64,4 @@ Muestra fechas. ...@@ -64,3 +64,4 @@ Muestra fechas.
|-----------------|-------------- |---------- |---------------------- |--------- | |-----------------|-------------- |---------- |---------------------- |--------- |
| date | fecha que la celda representa | Date | — | — | | 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 | — | — | | 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 | — | — |
## Card ## Card
Muestra información dentro de un contenedor `card` Muestra información dentro de un contenedor `card`
### Uso Basico ### Uso Básico
`Card` incluye titulo, contenido y operaciones. `Card` incluye titulo, contenido y operaciones.
......
...@@ -48,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado ...@@ -48,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
### Indicadores ### 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. :::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 ...@@ -184,7 +184,7 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
::: :::
### Atributos de Carousel ### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- | | ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
| height | Alto del carrusel | string | — | — | | height | Alto del carrusel | string | — | — |
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 | | initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
...@@ -198,16 +198,16 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form ...@@ -198,16 +198,16 @@ 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 | | direction | direccion en la que se muestra el contenido | string | horizontal/vertical | horizontal |
### Eventos de Carousel ### 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. | | change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
### Metodos de Carousel ### 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 | | 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 | — | | prev | Cambia al slider anterior | — |
| next | Cambia al slider siguiente | — | | next | Cambia al slider siguiente | — |
### Atributos de Carousel-Item ### Atributos de Carousel-Item
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
......
This diff is collapsed.
...@@ -51,9 +51,9 @@ Estado deshabilitado para el checkbox. ...@@ -51,9 +51,9 @@ Estado deshabilitado para el checkbox.
### Grupo de Checkboxes ### 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 ```html
<template> <template>
...@@ -248,7 +248,7 @@ Checkbox con estilo tipo Botón. ...@@ -248,7 +248,7 @@ Checkbox con estilo tipo Botón.
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false | | disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
| border | especifica si agrega un borde alrededor del Checkbox | 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 | — | | 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 | | checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false | | indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
......
...@@ -30,7 +30,7 @@ ColorPicker es un selector de color que soporta varios formatos de color. ...@@ -30,7 +30,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
### Alpha ### 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 ```html
<el-color-picker v-model="color" show-alpha></el-color-picker> <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. ...@@ -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 ```html
<el-color-picker <el-color-picker
v-model="color" v-model="color"
......
...@@ -197,7 +197,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere ...@@ -197,7 +197,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere
### Color neutro ### 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-row :gutter="12">
<el-col :span="6" :xs="{span: 12}"> <el-col :span="6" :xs="{span: 12}">
......
...@@ -13,7 +13,7 @@ De lo contrario, de forma horizontal. ...@@ -13,7 +13,7 @@ De lo contrario, de forma horizontal.
`<el-footer>`: Contenedor para pie de página. `<el-footer>`: Contenedor para pie de página.
:::tip :::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 ### Diseños comunes
......
...@@ -34,7 +34,7 @@ Vue.use(Element) ...@@ -34,7 +34,7 @@ Vue.use(Element)
``` ```
:::tip :::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 ### CLI para generar temas
...@@ -56,7 +56,7 @@ npm i https://github.com/ElementUI/theme-chalk -D ...@@ -56,7 +56,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
``` ```
#### <strong>Inicializar archivo de variables</strong> #### <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 ```shell
et -i [custom output file] et -i [custom output file]
......
...@@ -346,7 +346,7 @@ Preste atención a la capitalización ...@@ -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`, mayusculas | AM |
| `a` | am/pm | solamente para `format`, minúsculas | am | | `a` | am/pm | solamente para `format`, minúsculas | am |
| `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 | | `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 :::demo
```html ```html
...@@ -439,7 +439,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in ...@@ -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 | | disabled | si DatePicker esta deshabilitado | boolean | — | false |
| size | tamaño del input | string | large/small/mini | — | | size | tamaño del input | string | large/small/mini | — |
| editable | si el input es editable | boolean | — | true | | 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 | — | — | | placeholder | placeholder cuando el modo NO es rango | string | — | — |
| start-placeholder | placeholder para la fecha de inicio en modo 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 | — | — | | end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
...@@ -458,11 +458,11 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in ...@@ -458,11 +458,11 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close | | clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
### Opciones del Picker ### Opciones del Picker
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | 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[] | — | — | | 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 | — | — | | 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 }) | - | - | | onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Accesso directo ### Accesso directo
......
...@@ -224,10 +224,10 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d ...@@ -224,10 +224,10 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 | | firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 |
### Accesos directos ### Accesos directos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- | | -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |
| text | título del acceso directo | string | — | — | | 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 ### Eventos
| Nombre de evento | Descripción | Parámetros | | Nombre de evento | Descripción | Parámetros |
......
...@@ -242,7 +242,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu ...@@ -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 | | Nombre de Evento | Descripcíon | Parámetros |
| ---------------- | ---------------------------------------- | ---------- | | ---------------- | ---------------------------------------- | ---------- |
| open | se activa cuando se abre el cuadro de Diálogo | — | | 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 | — | | close | se dispara cuando el Diálogo se cierra | — |
| closed | se activa cuando finaliza la animación de cierre del Diálog | — | | closed | se activa cuando finaliza la animación de cierre del Diálog | — |
This diff is collapsed.
...@@ -39,7 +39,7 @@ webpack.config.js ...@@ -39,7 +39,7 @@ webpack.config.js
## Compatible con `vue-i18n@5.x` ## 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 ```javascript
import Vue from 'vue' import Vue from 'vue'
......
...@@ -62,7 +62,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca ...@@ -62,7 +62,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
### Fallo de carga ### 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 ```html
<div class="demo-image__error"> <div class="demo-image__error">
<div class="block"> <div class="block">
...@@ -114,7 +114,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca ...@@ -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 | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| src | origen de la imagen, igual que en nativo | string | — | - | | 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 | - | - | | alt | alt nativo | string | - | - |
| referrer-policy | referrerPolicy nativo | string | - | - | | referrer-policy | referrerPolicy nativo | string | - | - |
| lazy | si se usara lazy load | boolean | — | false | | lazy | si se usara lazy load | boolean | — | false |
......
## InfiniteScroll ## 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 ### Uso básico
Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom. Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.
:::demo :::demo
```html ```html
<template> <template>
<ul class="infinite-list" v-infinite-scroll="load"> <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 ...@@ -29,7 +30,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
``` ```
::: :::
### Disable Loading ### Deshabilite Loading
:::demo :::demo
```html ```html
...@@ -77,11 +78,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when ...@@ -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-disabled | si esta disabled | boolean | - |false |
| infinite-scroll-delay | throttle delay (ms) | number | - |200 | | infinite-scroll-delay | retraso en milisegundos | number | - |200 |
| infinite-scroll-distance| trigger distance (px) | number |- |0 | | infinite-scroll-distance| distancia de activación (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-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 |
This diff is collapsed.
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
### npm ### 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 ```shell
npm i element-ui -S 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 ...@@ -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>. (<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe> </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)
...@@ -66,7 +66,7 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l ...@@ -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. 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 ```html
<template> <template>
<el-table <el-table
......
...@@ -256,7 +256,7 @@ NavMenu vertical puede ser colapsado. ...@@ -256,7 +256,7 @@ NavMenu vertical puede ser colapsado.
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — | | default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
| unique-opened | si solo un submenu puede ser activo | boolean | — | false | | 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 | | 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 | | collapse-transition | si se debe permitir collapse transition | boolean | — | true |
### Métodos Menu ### Métodos Menu
...@@ -281,7 +281,7 @@ NavMenu vertical puede ser colapsado. ...@@ -281,7 +281,7 @@ NavMenu vertical puede ser colapsado.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------ | ---------------------------------------- | ------ | ----------------- | ----------- | | ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string/null | — | null | | 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 | | show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 |
| hide-timeout | tiempo de espera antes de ocultar 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 | | disabled | si esta `disabled` el sub-menu | boolean | — | false |
......
This diff is collapsed.
## Message ## 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 ```html
<template> <template>
...@@ -38,9 +38,9 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos. ...@@ -38,9 +38,9 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
### Tipos ### 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 ```html
<template> <template>
<el-button :plain="true" @click="open2">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
...@@ -80,9 +80,9 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a ...@@ -80,9 +80,9 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
### Closable ### 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 ```html
<template> <template>
<el-button :plain="true" @click="open1">message</el-button> <el-button :plain="true" @click="open1">message</el-button>
...@@ -130,7 +130,7 @@ Un boton para cerrar que puede ser agregado. ...@@ -130,7 +130,7 @@ Un boton para cerrar que puede ser agregado.
``` ```
::: :::
### Centered text ### Texto centrado
Utiliza el atributo `center` para centrar el texto. Utiliza el atributo `center` para centrar el texto.
:::demo :::demo
...@@ -181,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto. ...@@ -181,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto.
::: :::
:::warning :::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. 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`: ...@@ -196,7 +196,7 @@ Import `Message`:
import { Message } from 'element-ui'; 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 ### Options
| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto | | Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
...@@ -206,14 +206,15 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr ...@@ -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 | — | — | | iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false | | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false |
| customClass | nombre de clase personalizado para el componente Message | string | — | — | | 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 | | 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 boton para cerrar | boolean | — | false | | showClose | utilizado para mostrar un botón para cerrar | boolean | — | false |
| center | utilizado para centrar el texto | 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 | — | — | | onClose | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function | — | — |
| offset | set the distance to the top of viewport | number | — | 20 | | offset | La distancia desde la parte superior del viewport | number | — | 20 |
### Metodos ### Métodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`. `Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.
| Metodo | Descripcion |
| Método | Descripción |
| ------ | ---------------------------- | | ------ | ---------------------------- |
| close | cierra el componente Message | | close | cierra el componente Message |
...@@ -113,7 +113,7 @@ Proporcionamos cuatro tipos: success, warning, info y error. ...@@ -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. La notificación puede surgir de cualquier rincón que uno desee.
...@@ -280,7 +280,7 @@ Es posible ocultar el botón de cerrar ...@@ -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. 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`: ...@@ -292,26 +292,26 @@ Importar `Notification`:
import { Notification } from 'element-ui'; 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 ### Opciones
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- | | ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |
| title | titulo | string | — | — | | title | titulo | string | — | — |
| message | mensaje | string/Vue.VNode | — | — | | message | mensaje | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false | | 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 | — | — | | iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — |
| customClass | nombre de clase personalizado para la notificacion | string | — | — | | customClass | nombre de clase personalizado para la notificación | string | — | — |
| duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 | | duration | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number | — | 4500 |
| position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right | | position | posición personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | si se muestra el boton de cerrar | boolean | — | true | | showClose | si se muestra el botón de cerrar | boolean | — | true |
| onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — | | onClose | función que se ejecuta cuando la notificación se cierra | function | — | — |
| onClick | funcion que se ejecuta cuando se hace click en la notificación | 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 | | 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 ### Métodos
`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello. `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 | | Metodo | Descripción |
| ------ | ---------------------- | | ------ | ---------------------- |
......
## PageHeader ## 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 :::demo
```html ```html
...@@ -18,22 +18,26 @@ If path of the page is simple, it is recommended to use PageHeader instead of th ...@@ -18,22 +18,26 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
} }
} }
</script> </script>
```html ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |------------------------------ | ------ | |---------- |-------------- |---------- |------------------------------ | ------ |
| title | main title | string | — | Back | | title | titulo principal | string | — | Back |
| content | content | string | — | — | | content | contenido | string | — | — |
### Events ### Eventos
| Event Name | Description | Parameters | | 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 ### Slots
| slot | Description | | Nombre del slot | Descripción |
|---------- | ---------------------- | | --------------- | ----------- |
| title | title content | | title | titulo |
| content | content | | content | contenido |
```
```
\ No newline at end of file
...@@ -22,7 +22,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación. ...@@ -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`. :::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 ```html
...@@ -51,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado. ...@@ -51,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado.
### Más elementos ### 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. :::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 ...@@ -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` | | 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` | | 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 | | 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 boton `next` recibe el click 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 ### Slot
| Nombre | Descripción | | Nombre | Descripción |
......
...@@ -4,7 +4,7 @@ ...@@ -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. 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 ```html
<template> <template>
...@@ -146,12 +146,12 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d ...@@ -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 | | disabled | si el popover está deshabilitado | boolean | — | false |
| value / v-model | si el popover está visible | Boolean | — | false | | value / v-model | si el popover está visible | Boolean | — | false |
| offset | popover offset | number | — | 0 | | 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 | | 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-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 | — | — | | popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — | | 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 ### Slot
| Nombre | Descripción | | Nombre | Descripción |
...@@ -163,6 +163,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d ...@@ -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 | | Nombre del evento | Descripción | Parámetros |
| ----------------- | --------------------------------------- | ---------- | | ----------------- | --------------------------------------- | ---------- |
| show | se dispara cuando se muestra el popover | — | | 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 | — | | 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 | — |
...@@ -3,7 +3,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u ...@@ -3,7 +3,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
### Barra de progreso lineal ### 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 ```html
<el-progress :percentage="50"></el-progress> <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 ...@@ -24,8 +24,8 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
``` ```
::: :::
### Pporcentage interno ### Porcentaje interno
En este caso el porcentage no toma espacio adicional. 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. :::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 ```html
...@@ -36,9 +36,9 @@ En este caso el porcentage no toma espacio adicional. ...@@ -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 :::demo
...@@ -110,9 +110,9 @@ You can use `color` attr to set the progress bar color. it accepts color string, ...@@ -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 ```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress> <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
......
...@@ -18,7 +18,7 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen ...@@ -18,7 +18,7 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
#### Importando todo #### Importando todo
In main.js: En main.js:
```javascript ```javascript
import Vue from 'vue'; import Vue from 'vue';
...@@ -233,7 +233,9 @@ Vue.prototype.$message = Message; ...@@ -233,7 +233,9 @@ Vue.prototype.$message = Message;
### Configuración global ### 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: Importando Element completamente:
...@@ -253,7 +255,7 @@ Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }; ...@@ -253,7 +255,7 @@ Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button); 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! ### Empiece ya!
......
...@@ -178,7 +178,7 @@ Radio con estilo de botón. ...@@ -178,7 +178,7 @@ Radio con estilo de botón.
| disabled | si el Radio está deshabilitado | boolean | — | false | | disabled | si el Radio está deshabilitado | boolean | — | false |
| border | agregar borde alrededor del elemento Radio | 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 | — | | 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 ### Atributos de Radio-button
...@@ -186,7 +186,7 @@ Radio con estilo de botón. ...@@ -186,7 +186,7 @@ Radio con estilo de botón.
| -------- | ------------------------------ | --------------- | ---------------- | ----------- | | -------- | ------------------------------ | --------------- | ---------------- | ----------- |
| label | el valor del Radio | string / number | — | — | | label | el valor del Radio | string / number | — | — |
| disabled | si el Radio está deshabilitado | boolean | — | false | | disabled | si el Radio está deshabilitado | boolean | — | false |
| name | atributo nativo 'name' | string | — | — | | name | atributo nativo `name` | string | — | — |
### Atributos de Radio-group ### Atributos de Radio-group
...@@ -194,7 +194,7 @@ Radio con estilo de botón. ...@@ -194,7 +194,7 @@ Radio con estilo de botón.
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- | | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
| value / v-model | valor enlazado | string / number / boolean | — | — | | value / v-model | valor enlazado | string / number / boolean | — | — |
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — | | 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 | | 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 | | fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |
......
...@@ -4,7 +4,7 @@ Usado para la calificación ...@@ -4,7 +4,7 @@ Usado para la calificación
### Uso básico ### 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 ```html
...@@ -122,7 +122,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e ...@@ -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 | | 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 | | 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 | | 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 | | void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 | | 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'] | | 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'] |
......
...@@ -541,16 +541,16 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va ...@@ -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 | | 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 | — | | size | tamaño del Input | string | large/small/mini | — |
| clearable | si el select puede ser limpiado | boolean | — | false | | 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 | — | — | | name | el atributo `name` del input seleccionado | string | — | — |
| autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off | | 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 | | placeholder | placeholder | string | — | Select |
| filterable | si Select es filtrable | boolean | — | false | | filterable | si Select es filtrable | boolean | — | false |
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | 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 | — | — | | filter-method | método de filtrado personalizado | function | — | — |
| remote | si las opciones se traeran desde el servidor | boolean | — | false | | remote | si las opciones se traerán desde el servidor | boolean | — | false |
| remote-method | metodo de busqueda remota personalizada | function | — | — | | remote-method | método de búsqueda remota personalizada | function | — | — |
| loading | si Select está cargando datos del servidor | boolean | — | false | | 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 | | 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 | | 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 |
...@@ -562,14 +562,14 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va ...@@ -562,14 +562,14 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false | | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
### Eventos Select ### Eventos Select
| Nombre | Descripción | Parametros | | Nombre | Descripción | Parametros |
| -------------- | ---------------------------------------- | ---------------------------------------- | | -------------- | ------------------------------------------------------------ | ----------------------------------------- |
| change | se dispara cuando el valor del select cambia | valor actual del select | | 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 | | 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 multiple | el valor del tag removido | | 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 | — | | clear | se dispara cuando el icono se clickea en un Select limpiable | — |
| blur | se dispara cuando el input pierde el foco | (event: Event) | | blur | se dispara cuando el input pierde el foco | (event: Event) |
| focus | se dispara cuando el input obtiene el foco | (event: Event) | | focus | se dispara cuando el input obtiene el foco | (event: Event) |
### Select Slots ### Select Slots
| Name | Description | | Name | Description |
......
...@@ -93,7 +93,7 @@ Las opciones pueden ser discretas. ...@@ -93,7 +93,7 @@ Las opciones pueden ser discretas.
### Slider con input ### 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. :::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. ...@@ -217,11 +217,11 @@ Se soporta la selección de un rango de valores.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- | | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
| value / v-model | valor enlazado | number | — | 0 | | value / v-model | valor enlazado | number | — | 0 |
| min | valor minimo | number | — | 0 | | min | valor mínimo | number | — | 0 |
| max | valor máximo | number | — | 100 | | max | valor máximo | number | — | 100 |
| disabled | si el Slider esta deshabitado | boolean | — | false | | disabled | si el Slider esta deshabitado | boolean | — | false |
| step | tamaño del paso | number | — | 1 | | 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 | | 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 | | input-size | tamaño del input | string | large / medium / small / mini | small |
| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false | | show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
......
...@@ -35,11 +35,11 @@ Barra de pasos simple. ...@@ -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. 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 ```html
<el-steps :space="200" :active="1" finish-status="success"> <el-steps :space="200" :active="1" finish-status="success">
...@@ -79,7 +79,7 @@ Puede poner una descripción para cada paso. ...@@ -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. En la barra de pasos se pueden utilizar diversos iconos personalizados.
...@@ -133,15 +133,15 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y ...@@ -133,15 +133,15 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
### Steps atributos ### Steps atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- | | -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — | | 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 | | direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | actual paso de activación | number | — | 0 | | active | actual paso de activación | number | — | 0 |
| process-status | status del paso actual | string | wait / process / finish / error / success | process | | process-status | estatus del paso actual | string | wait / process / finish / error / success | process |
| finish-status | status del paso final | string | wait / process / finish / error / success | finish | | finish-status | estatus del paso final | string | wait / process / finish / error / success | finish |
| align-center | centrado de título y descripción | boolean | — | false | | align-center | centrado de título y descripción | boolean | — | false |
| simple | si aplicar un tema simple | boolean | - | false | | simple | si aplicar un tema simple | boolean | - | false |
### Step atributos ### Step atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
...@@ -156,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y ...@@ -156,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
| ----------- | -------------------- | | ----------- | -------------------- |
| icon | Icono personalizado | | icon | Icono personalizado |
| title | Titulo del paso | | title | Titulo del paso |
| description | Descripcion del paso | | description | Descripción del paso |
## Switch ## Switch
Switch es utilizdo para realizar cambios entre dos estados opuestos. Switch es utilizado para realizar cambios entre dos estados opuestos.
### Uso básico ### Uso básico
...@@ -121,8 +121,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos. ...@@ -121,8 +121,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
| value / v-model | valor enlazado | boolean / string / number | — | — | | value / v-model | valor enlazado | boolean / string / number | — | — |
| disabled | si Switch esta deshabilitado | boolean | — | false | | disabled | si Switch esta deshabilitado | boolean | — | false |
| width | ancho del componente Switch | number | — | 40 | | 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 | — | — | | 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`, sobreescribe `inactive-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 | — | — | | active-text | texto mostrado en el estado `on` | string | — | — |
| inactive-text | texto mostrado en el estado `off` | 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 | | active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true |
......
This diff is collapsed.
...@@ -288,14 +288,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ...@@ -288,14 +288,14 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
| before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — | | before-leave | función `hook` antes de cambiar de pestaña. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se evitará el cambio. | Function(activeName, oldActiveName) | — | — |
### Eventos de Pestañas ### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros | | Nombre de Evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ----------------------------- | | ---------------- | ------------------------------------------------------------ | ----------------------------- |
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada | | tab-click | se lanza cuando se hace clic 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-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 click al botón tab-add | — | | 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) | | 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 | | Atributo | Descripción | Tipo | Valores Aceptados | Default |
| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ | | -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
| label | título de la pestaña | string | — | — | | label | título de la pestaña | string | — | — |
......
...@@ -187,13 +187,13 @@ Tag provide three different themes: `dark`、`light` and `plain` ...@@ -187,13 +187,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | 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 | | closable | si el Tag puede ser removido | boolean | — | false |
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false | | disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
| hit | si el Tag tiene un borde resaltado | boolean | — | false | | hit | si el Tag tiene un borde resaltado | boolean | — | false |
| color | color de fondo del Tag | string | — | — | | color | color de fondo del Tag | string | — | — |
| size | tamaño del Tag | string | medium / small / mini | — | | 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 ### Eventos
......
...@@ -4,7 +4,7 @@ Use el Time Picker para input de tipo time. ...@@ -4,7 +4,7 @@ Use el Time Picker para input de tipo time.
### Selector de tiempo fijo ### 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`. :::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 ```html
......
...@@ -140,7 +140,7 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando ...@@ -140,7 +140,7 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| timestamp | Contenido de las marcas de tiempo | string | - | — | | timestamp | Contenido de las marcas de tiempo | string | - | — |
| hide-timestamp | Si se muestra o no timestamp | boolean | — | false | | 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 | - | | type | tipo de nodo | string | primary / success / warning / danger / info | - |
| color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - | | color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |
| size | tamaño del nodo | string | normal / large | normal | | size | tamaño del nodo | string | normal / large | normal |
...@@ -149,5 +149,5 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando ...@@ -149,5 +149,5 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
### Timeline-Item Slot ### Timeline-Item Slot
| name | Description | | name | Description |
|------|--------| |------|--------|
| — | Contenido personalizado del item del timeline | | — | Contenido personalizado del ítem del timeline |
| dot | Definicion personalizada del nodo | | dot | Definición personalizada del nodo |
...@@ -99,7 +99,7 @@ Tooltip tiene 9 colocaciones. ...@@ -99,7 +99,7 @@ Tooltip tiene 9 colocaciones.
### Tema ### 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`. :::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
```html ```html
...@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`. ...@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`.
Despliegue múltiples líneas de texto y establezca su formato. 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 ```html
<el-tooltip placement="top"> <el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div> <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 ...@@ -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`. 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 :::demo
```html ```html
...@@ -168,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele ...@@ -168,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
``` ```
::: :::
:::tip :::tip
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`. El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
......
## Transfer ## Transfer
### Uso básico ### 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 ```html
<template> <template>
<el-transfer <el-transfer
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
Puede buscar y filtrar los items. 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 ```html
<template> <template>
<el-transfer <el-transfer
...@@ -81,9 +81,9 @@ Puede buscar y filtrar los items. ...@@ -81,9 +81,9 @@ Puede buscar y filtrar los items.
### Personalizable ### 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 ```html
<template> <template>
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p> <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 ...@@ -238,7 +238,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Scoped Slot ### Scoped Slot
| Name | Description | | 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 ### Methods
| Method | Description | Parameters | | Method | Description | Parameters |
...@@ -248,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el ...@@ -248,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Eventos ### Eventos
| Nombre | Descripcion | Parametros | | 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 | | 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 | | 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 |
...@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer ...@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
### Colapsado ### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`. Para efectos de colapsado usar el componente `el-collapse-transition`.
:::demo :::demo
```html ```html
<template> <template>
<div> <div>
...@@ -140,7 +141,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`. ...@@ -140,7 +141,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
``` ```
::: :::
### On demand ### Bajo demanda
```js ```js
// fade/zoom // fade/zoom
......
This diff is collapsed.
...@@ -268,33 +268,33 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi ...@@ -268,33 +268,33 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
::: :::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- | | ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |
| action | obligatorio, URL de la petición | string | — | — | | action | obligatorio, URL de la petición | string | — | — |
| headers | cabeceras de la petición | object | — | — | | headers | cabeceras de la petición | object | — | — |
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — | | multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
| data | opciones adicionales de la petición | object | — | — | | data | opciones adicionales de la petición | object | — | — |
| name | nombre clave del archivo | string | — | file | | name | nombre clave del archivo | string | — | file |
| with-credentials | especifica si enviará cookies | boolean | — | false | | with-credentials | especifica si enviará cookies | boolean | — | false |
| show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true | | show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true |
| drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false | | drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false |
| accept | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | — | | accept | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | — |
| on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | — | | on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | — |
| on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | — | | on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | — |
| on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | — | | on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | — |
| on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | — | | on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | — |
| on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — | | 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) | — | — | | 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-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 | | 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 | — | [] | | 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 | | list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
| auto-upload | se especifica si se autocargan archivos | boolean | — | true | | 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 | | disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — | | limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - | | on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
### Slot ### Slot
| Nombre | Descripcion | | Nombre | Descripcion |
......
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