Skip to content

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

Doc: Update Spanish Doc 2.9.1 (#15840) 

* Update Spanish Doc 2.9.1

* Update Spanish Doc 2.9.1

* Update Spanish Doc 2.9.1

* doc: Update spanish doc 2.9.1
parent 4bc098b7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 472 additions and 457 deletions
CHANGELOG.es.md
View file @ 0de427a3
......@@ -13,104 +13,104 @@
*2019-05-30*
#### New features
#### Nuevas características
- Table
- tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event are supported in Tree Table (#15709 by @ziyoung)
- tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change event son compatibles con Tree Table (#15709 by @ziyoung)
#### Bug fixes
#### Corrección de errores
- Table
- Fix some bugs (#15709 by @ziyoung)
- Corrección de algunos errores (#15709 by @ziyoung)
- Theme
- Update api host (#15784 by @iamkun)
- Actualización del host de la api (#15784 by @iamkun)
#### Optimization
#### Optimización
- Chore
- Update InfiniteScroll type (#15794 by @iamkun)
- Tarea
- Una actualización del tipo InfiniteScroll (#15794 by @iamkun)
### 2.9.0
*2019-05-30*
#### New features
#### Nuevas características
- Backtop
- Add Backtop component (#15541 by @iamkun)
- Añadido componente Backtop (#15541 by @iamkun)
- PageHeader
- Add PageHeader component (#15714 by @ziyoung)
- Añadido el componente PageHeader (#15714 by @ziyoung)
- InfiniteScroll
- Add InfiniteScroll directive (#15567 by @iamkun)
- Añadida la directiva InfiniteScroll (#15567 by @iamkun)
- Cascader
- Add multiple mode and filter-method (#15611 by @SimonaliaChen)
- Agregado modo múltiple y método de filtro (#15611 by @SimonaliaChen)
- Message
- Display in stack mode (#15639 by @island205)
- Visualización en modo stack (#15639 by @island205)
- Tag
- Add prop effect (#15725 by @SimonaliaChen)
- Añadido prop effect (#15725 by @SimonaliaChen)
- Tabs
- Left align title when type is card (#15695 by @luckyCao)
- Alinea el título a la izquierda cuando el tipo es card (#15695 by @luckyCao)
- DatePicker
- Support literal strings (#15525 by island205)
- Soporta cadenas literales (#15525 by island205)
- Image
- Add support for transmit attrs and listeners (#15578 by @VanMess)
- Añadido soporte para transmitir attrs y listeners (#15578 by @VanMess)
- Theme
- Add popup background (#15412 by @iamkun)
- Chore
- Update new 2.9.0 index page (#15682 by @iamkun)
- Añadido fondo al popup (#15412 by @iamkun)
- Tarea
- Actualizada la nueva página de índice 2.9.0 (#15682 by @iamkun)
#### Bug fixes
#### Corrección de errores
- Table
- Fix sort-change behaviour when sort condition is null (#15012 by @joelxr)
- Corregido el comportamiento de cambio de orden cuando la condición de orden es nula (#15012 by @joelxr)
- Image
- Fix ssr and object-fit compatibility (#15346 by @SimonaliaChen)
- Corregido ssr y compatibilidad de ajuste de objetos (#15346 by @SimonaliaChen)
- Input
- Fix show-word-count style in el-form (#15359 by @lvjiaxuan)
- Fix clear icon is not centered (#15354 by @YiiGuxing)
- Corregido estilo show-word-count en el-form (#15359 by @lvjiaxuan)
- Corregido el icono de borrar que no estaba centrado (#15354 by @YiiGuxing)
- Calendar
- Fix not correct day of week when the day is Sunday (#15399 by @qingdengyue)
- Fix October disappear bug (#15394 by @qingdengyue)
- Corregido día de la semana no correcto cuando el día es domingo (#15399 by @qingdengyue)
- Corregido error de desaparición de octubre (#15394 by @qingdengyue)
- Tabs
- Fix basic tab nested in card tab padding error (#15461 by @SimonaliaChen)
- Corrección de la pestaña básica anidada en el error de relleno de la pestaña de la tarjeta (#15461 by @SimonaliaChen)
- Tag
- Fix stop propagation problem (#15150 by @infjer)
- Corregido problema de propagación de stop (#15150 by @infjer)
- Form
- Fix input-group within form-item height error (#15457 by @SimonaliaChen)
- Fix resetFields issue (15181 by @luckyCao)
- Corregido el error de grupo de entrada dentro de la altura del elemento de formulario (#15457 by @SimonaliaChen)
- Solucionado el problema de resetFields (15181 by @luckyCao)
- Tooltip
- Fix custom tabindex not work (#15619 by @SimonaliaChen )
- Corregido tabindex personalizado no funcionaba (#15619 by @SimonaliaChen )
- Link
- Fix link icon style class (#15752 by @iamkun)
- Select
- Revert set value to null when cleared (#15447 by @iamkun)
- Arreglada la clase de estilo del icono de enlace (#15752 by @iamkun)
- Select
- Revertir el valor establecido a nulo cuando se borra (#15447 by @iamkun)
- Loading
- Fix dom not change when loading state change quickly (#15123 by @FAKER-A)
- Corregido dom no cambia cuando el estado de carga cambia rápidamente (#15123 by @FAKER-A)
- Switch
- Label with el-switch repeating event (#15178 by @FAKER-A)
- Etiqueta con el evento de repetición del interruptor (#15178 by @FAKER-A)
- Slider
- Fix style problem when clicking slider bar(#15561 by @luckyCao)
- Arreglado el problema de estilo al hacer clic en la barra deslizante (#15561 by @luckyCao)
- Radio
- Fix issue 14808 (#14809 by @OverTree)
- Solucionado el problema 14808 (#14809 by @OverTree)
- Form
- Fix resetFields issue (15181 by @luckyCao)
- Chore
- Upgrade dependencies and fix demo bug (#15324 by ziyoung)
- Solucionado el problema de resetFields (15181 by @luckyCao)
- Tarea
- Se actualizaron las dependencias y se corrigió el error de demostración (#15324 by ziyoung)
- Type
- Fix loading type definition (#15635 by @iamkun)
- Fix Icon type (#15634 by @iamkun)
- Fix Link type definition (#15402 by @iamkun)
- Corregida la definición del tipo de carga (#15635 by @iamkun)
- Corregido tipo Icono (#15634 by @iamkun)
- Corregida la definición del tipo de enlace (#15402 by @iamkun)
#### Optimization
#### Optimización
- Cascader
- Refactor (#15611 by @SimonaliaChen)
- Chore
- Update make new component logic (by @iamkun)
- Docs
- Rename variable in docs (#15185 by @liupl)
- Fix image attribute type and default value (#15423 by @haoranyu)
- Fix form doc bug (#15228 by @SHERlocked93)
- Refractorización (#15611 by @SimonaliaChen)
- Tarea
- Actualización hacer nueva lógica de componentes (by @iamkun)
- Documentación
- Renombrar variable en docs (#15185 by @liupl)
- Corregido el atributo type de imagen y el valor por defecto (#15423 by @haoranyu)
- Corregido error en la doc de form (#15228 by @SHERlocked93)
### 2.8.2
......@@ -186,7 +186,7 @@
- Arreglado el estilo del label (#14969 by @ziyoung)
- Los FormItem requeridos muestran astericos cuando el label es auto (#15144 by @ziyoung)
- Pagination
- Arreglaod que el slot no se actualizaba (#14711 by @lucyhao)
- Arreglado que el slot no se actualizaba (#14711 by @lucyhao)
- Table
- Arreglado un bug del load en el modo lazy (#15101 by @ziyoung)
- Arreglado el ancho de la celda cuando colspan es mayor que 1 (#15196 by @ziyoung)
......
examples/docs/es/backtop.md
View file @ 0de427a3
## Backtop
A button to back to top
Un botón para volver a la parte superior
### Basic usage
### Uso básico
Scroll down to see the bottom-right button.
Desplácese hacia abajo para ver el botón en el lado inferior derecho.
:::demo
```html
......@@ -16,9 +16,9 @@ Scroll down to see the bottom-right button.
:::
### Customizations
### Personalización
Display area is 40px \* 40px.
Área de visualización de 40px \* 40px.
:::demo
```html
......@@ -44,17 +44,17 @@ Display area is 40px \* 40px.
:::
### Attributes
### Atributos
| Attribute | Description | Type | Accepted Values | Default |
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | ------------------------------------------------------------------- | --------------- | --------------- | ------- |
| target | the target to trigger scroll | string | | |
| visibility-height | the button will not show until the scroll height reaches this value | number | | 200 |
| right | right distance | number | | 40 |
| bottom | bottom distance | number | | 40 |
| target | el objetivo para activar el scroll | string | | |
| visibility-height | el botón no se mostrará hasta que la altura de desplazamiento alcance este valor | number | | 200 |
| right | separación desde la derecha | number | | 40 |
| bottom | separación desde abajo | number | | 40 |
### Events
### Eventos
| Event Name | Description | Parameters |
| ---------- | ------------------- | ----------- |
| click | triggers when click | click event |
| Nombre del evento | Descripción | Parámetros |
| ----------------- | ----------------------- | ----------- |
| click | se activa al hacer clic | click event |
examples/docs/es/badge.md
View file @ 0de427a3
......@@ -122,3 +122,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
| hidden | oculta el badge | boolean | — | false |
| type | tipo de botón | string | primary / success / warning / danger / info | — |
examples/docs/es/breadcrumb.md
View file @ 0de427a3
......@@ -5,7 +5,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Uso básico
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el carácter separador. El valor por defecto es '/'.
```html
<el-breadcrumb separator="/">
......@@ -34,7 +34,7 @@ Muestra la localización de la página actual, haciendo más fácil el poder ir
### Breadcrumb atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
| separator | caracter separador | string | — | / |
| separator | carácter separador | string | — | / |
| separator-class | nombre de la clase del icono separador | string | — | - |
### Breadcrumb Item atributos
......
examples/docs/es/button.md
View file @ 0de427a3
......@@ -87,7 +87,7 @@ Botones sin borde ni fondo.
Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos personalizados.
```html
<el-button type="primary" icon="el-icon-edit"></el-button>
......@@ -132,7 +132,7 @@ Cuando se hace clic en un botón para descargar datos, el botón muestra un esta
Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` o `mini`.
```html
<el-row>
......@@ -157,9 +157,10 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
| type | tipo de botón | string | primary / success / warning / danger / info / text | — |
| plain | determinar si es o no un botón plano | boolean | — | false |
| round | determinar si es o no un botón redondo | boolean | — | false |
| circle | determina si es un boton circular | boolean | — | false |
| circle | determina si es un botón circular | boolean | — | false |
| loading | determinar si es o no un botón de descarga | boolean | — | false |
| disabled | deshabilitar el botón | boolean | — | false |
| icon | nombre de la clase del icono | string | — | — |
| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false |
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |
\ No newline at end of file
| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |
examples/docs/es/calendar.md
View file @ 0de427a3
......@@ -2,7 +2,7 @@
Muestra fechas.
### Basico
### Básico
:::demo Configure el valor para especificar el mes que se muestra actualmente. Si no se especifica el valor, se muestra el mes actual. el valor soporta la vinculación bidireccional.
```html
......@@ -64,3 +64,4 @@ Muestra fechas.
|-----------------|-------------- |---------- |---------------------- |--------- |
| date | fecha que la celda representa | Date | — | — |
| data | { type, isSelected, day}. `type` indica el mes al que pertenece la fecha, los valores opcionales son mes anterior, mes actual, mes siguiente; `isSelected` indica si la fecha está seleccionada; `day` es la fecha formateada en el formato yyyy-MM-dd | Object | — | — |
examples/docs/es/card.md
View file @ 0de427a3
## Card
Muestra información dentro de un contenedor `card`
### Uso Basico
### Uso Básico
`Card` incluye titulo, contenido y operaciones.
......
examples/docs/es/carousel.md
View file @ 0de427a3
......@@ -48,7 +48,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
### Indicadores
Los indicadores de paginacion pueden mostrarse fuera del carrusel
Los indicadores de paginación pueden mostrarse fuera del carrusel
:::demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta.
......@@ -184,7 +184,7 @@ Por defecto, `direction` es `horizontal`. El carousel puede ser mostrado de form
:::
### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------ | -------------------------------------------------- | ------- | ------------------- | ----------- |
| height | Alto del carrusel | string | — | — |
| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 |
......@@ -198,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 |
### Eventos de Carousel
| Nombre evento | Descripción | Parametros |
| ------------- | ---------------------------------------- | ---------------------------------------- |
| Nombre evento | Descripción | Parámetros |
| ------------- | ----------------------------------------- | ------------------------------------------------------------ |
| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. |
### Metodos de Carousel
| Metodos | Descripción | Parametros |
| ------------- | -------------------------- | ---------------------------------------- |
| Metodos | Descripción | Parámetros |
| ------------- | -------------------------- | ------------------------------------------------------------ |
| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente |
| prev | Cambia al slider anterior | — |
| next | Cambia al slider siguiente | — |
| prev | Cambia al slider anterior | — |
| next | Cambia al slider siguiente | — |
### Atributos de Carousel-Item
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
......
examples/docs/es/cascader.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/checkbox.md
View file @ 0de427a3
......@@ -51,9 +51,9 @@ Estado deshabilitado para el checkbox.
### Grupo de Checkboxes
Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
Es usado por múltiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada.
:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
:::demo El elemento `checkbox-group` puede manejar múltiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa.
```html
<template>
......@@ -248,7 +248,7 @@ Checkbox con estilo tipo Botón.
| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false |
| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false |
| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — |
| name | atributo 'name' nativo | string | — | — |
| name | atributo `name` nativo | string | — | — |
| checked | especifica si el Checkbox está marcado | boolean | — | false |
| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false |
......
examples/docs/es/color-picker.md
View file @ 0de427a3
......@@ -30,7 +30,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
### Alpha
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agregue el atributo `show-alpha`.
```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
......@@ -46,9 +46,9 @@ ColorPicker es un selector de color que soporta varios formatos de color.
```
:::
### Predefined colors
### Colores predefinidos
:::demo ColorPicker supports predefined color options
:::demo ColorPicker soporta opciones de color predefinidas
```html
<el-color-picker
v-model="color"
......
examples/docs/es/color.md
View file @ 0de427a3
......@@ -197,7 +197,7 @@ Además del color principal, se necesitan utilizar distintos colores para difere
### Color neutro
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica.
Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jerárquica.
<el-row :gutter="12">
<el-col :span="6" :xs="{span: 12}">
......
examples/docs/es/container.md
View file @ 0de427a3
......@@ -13,7 +13,7 @@ De lo contrario, de forma horizontal.
`<el-footer>`: Contenedor para pie de página.
:::tip
Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
Estos componentes utilizan flex para el diseño, así que asegúrese que el navegador lo soporta. Además, los elementos directos de `<el-container>` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
:::
### Diseños comunes
......
examples/docs/es/custom-theme.md
View file @ 0de427a3
......@@ -34,7 +34,7 @@ Vue.use(Element)
```
:::tip
Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
Nota es necesario sobrescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
:::
### CLI para generar temas
......@@ -56,7 +56,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>Inicializar archivo de variables</strong>
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilize `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en su CLI (si instalo el paquete de manera local, utilice `node_modules/.bin/et` en su lugar). Ejecute `-i` para inicializar un archivo de variables, puede especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puede especificar un directorio distinto.
```shell
et -i [custom output file]
......
examples/docs/es/date-picker.md
View file @ 0de427a3
......@@ -346,7 +346,7 @@ Preste atención a la capitalización
| `A` | AM/PM | solamente para `format`, mayusculas | AM |
| `a` | am/pm | solamente para `format`, minúsculas | am |
| `timestamp` | JS timestamp | solamente para `value-format`; valor vinculado debe ser un `number` | 1483326245000 |
| `[MM]` | No escape characters | To escape characters, wrap them in square brackets (e.g. [A] [MM]) | MM |
| `[MM]` | No hay caracteres de escape | Para escapar de los caracteres, colóquelos entre corchetes (ejemplo: [A] [MM]). | MM |
:::demo
```html
......@@ -439,7 +439,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
| disabled | si DatePicker esta deshabilitado | boolean | — | false |
| size | tamaño del input | string | large/small/mini | — |
| editable | si el input es editable | boolean | — | true |
| clearable | si se muestra el boton de borrado | boolean | — | true |
| clearable | si se muestra el botón de borrado | boolean | — | true |
| placeholder | placeholder cuando el modo NO es rango | string | — | — |
| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — |
| end-placeholder | placeholder para la fecha final en modo rango | string | — | — |
......@@ -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 |
### 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[] | — | — |
| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — |
| firstDayOfWeek | primer dia de la semana | Number | 1 to 7 | 7 |
| firstDayOfWeek | primer día de la semana | Number | 1 to 7 | 7 |
| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - |
### Accesso directo
......
examples/docs/es/datetime-picker.md
View file @ 0de427a3
......@@ -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 |
### Accesos directos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| text | título del acceso directo | string | — | — |
| onClick | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ------------------------------------------------------------ | -------- | ----------------- | ----------- |
| text | título del acceso directo | string | — | — |
| onClick | la función se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — |
### Eventos
| Nombre de evento | Descripción | Parámetros |
......
examples/docs/es/dialog.md
View file @ 0de427a3
......@@ -242,7 +242,7 @@ Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no pu
| Nombre de Evento | Descripcíon | Parámetros |
| ---------------- | ---------------------------------------- | ---------- |
| open | se activa cuando se abre el cuadro de Diálogo | — |
| opened | se activa cuando la animacion de apertura del Dialog termina. | — |
| opened | se activa cuando la animación de apertura del Dialog termina. | — |
| close | se dispara cuando el Diálogo se cierra | — |
| closed | se activa cuando finaliza la animación de cierre del Diálog | — |
examples/docs/es/form.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/i18n.md
View file @ 0de427a3
......@@ -39,7 +39,7 @@ webpack.config.js
## Compatible con `vue-i18n@5.x`
Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.
```javascript
import Vue from 'vue'
......
examples/docs/es/image.md
View file @ 0de427a3
......@@ -62,7 +62,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
### Fallo de carga
:::demo Personalice el contenido cuando ocurra algun error al cargar la imagen via `slot = error`
:::demo Personalice el contenido cuando ocurra algún error al cargar la imagen vía `slot = error`
```html
<div class="demo-image__error">
<div class="block">
......@@ -114,7 +114,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| src | origen de la imagen, igual que en nativo | string | — | - |
| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
| fit | Indica como la imagen debe adaptarse al contenedor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
| alt | alt nativo | string | - | - |
| referrer-policy | referrerPolicy nativo | string | - | - |
| lazy | si se usara lazy load | boolean | — | false |
......
examples/docs/es/infiniteScroll.md
View file @ 0de427a3
## InfiniteScroll
Load more data while reach bottom of the page
Cargar más datos mientras se llega al final de la página
### Basic usage
Add `v-infinite-scroll` to the list to automatically execute loading method when scrolling to the bottom.
### Uso básico
Añada `v-infinite-scroll` a la lista para ejecutar automáticamente el método de carga cuando se desplace hacia abajo.
:::demo
```html
<template>
<ul class="infinite-list" v-infinite-scroll="load">
......@@ -29,7 +30,7 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
```
:::
### Disable Loading
### Deshabilite Loading
:::demo
```html
......@@ -77,11 +78,11 @@ Add `v-infinite-scroll` to the list to automatically execute loading method when
:::
### Attributes
### Atributos
| Attribute | Description | Type | Accepted values | Default |
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------ | --------- | ------------------------------------ | ------- |
| infinite-scroll-disabled | is disabled | boolean | - |false |
| infinite-scroll-delay | throttle delay (ms) | number | - |200 |
| infinite-scroll-distance| trigger distance (px) | number |- |0 |
| infinite-scroll-immediate |Whether to execute the loading method immediately, in case the content cannot be filled up in the initial state. | boolean | - |true |
| infinite-scroll-disabled | si esta disabled | boolean | - |false |
| infinite-scroll-delay | retraso en milisegundos | number | - |200 |
| infinite-scroll-distance| distancia de activación (px) | number |- |0 |
| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
examples/docs/es/input.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/installation.md
View file @ 0de427a3
......@@ -2,7 +2,7 @@
### npm
Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
Instalar mediante npm es la forma recomendada ya que se integra fácilmente con [webpack](https://webpack.js.org/).
```shell
npm i element-ui -S
......@@ -31,4 +31,4 @@ Si esta usando un CDN, una página con Hello-World es fácil con Element. [Onlin
(<a href='https://codepen.io/ziyoung'>@ziyoung</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: [Quick Start](/#/es/component/quickstart)
Si esta usando npm y desea combinarlo con webpack, por favor continué a la siguiente página: [Quick Start](/#/es/component/quickstart)
examples/docs/es/loading.md
View file @ 0de427a3
......@@ -66,7 +66,7 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
Puede personalizar el texto de carga, spinner de carga y color de fondo.
:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
:::demo Agregue el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
```html
<template>
<el-table
......
examples/docs/es/menu.md
View file @ 0de427a3
......@@ -256,7 +256,7 @@ NavMenu vertical puede ser colapsado.
| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — |
| unique-opened | si solo un submenu puede ser activo | boolean | — | false |
| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | hover / click | hover |
| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
| router | si el modo `vue-router` está activado. Si es verdadero, el índice será usado como 'path' para activar la ruta | boolean | — | false |
| collapse-transition | si se debe permitir collapse transition | boolean | — | true |
### Métodos Menu
......@@ -281,7 +281,7 @@ NavMenu vertical puede ser colapsado.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------ | ---------------------------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string/null | — | null |
| popper-class | nombre personalizado de la clase del menu popup | string | — | — |
| popper-class | nombre personalizado de la clase del menú popup | string | — | — |
| show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 |
| hide-timeout | tiempo de espera antes de ocultar un submenú | number | — | 300 |
| disabled | si esta `disabled` el sub-menu | boolean | — | false |
......
examples/docs/es/message-box.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/message.md
View file @ 0de427a3
## Message
Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema.
Utilizado para mostrar retroalimentación después de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificación pasiva a nivel de sistema.
### Uso basico
### Uso básico
Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
Se muestra en la parte superior de la pagina y desaparece después de 3 segundos.
:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas en detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
:::demo La configuración del componente Message es muy similar al del componente notification, así que parte de las opciones no serán explicadas en detalle aquí. Puedes consultar la tabla de opciones en la parte inferior combinada con la documentación del componente notification para comprenderla. Element a registrado un método `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parámetro, y lo mostrara como el cuerpo principal.
```html
<template>
......@@ -38,9 +38,9 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
### Tipos
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
Utilizados para mostrar retroalimentación de Success, Warning, Message y Error activities.
:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
:::demo Cuando necesite mas personalización, el componente Message también puede tomar un objeto como parámetro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. También, hay registrados métodos para los diferentes tipos, así que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
```html
<template>
<el-button :plain="true" @click="open2">success</el-button>
......@@ -80,9 +80,9 @@ Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error a
### Closable
Un boton para cerrar que puede ser agregado.
Un botón para cerrar que puede ser agregado.
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`.
:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atributo `duration` que puede ser controlado. Por defecto la duración es de 3000 ms, y no desaparecerá al llegar a `0`.
```html
<template>
<el-button :plain="true" @click="open1">message</el-button>
......@@ -130,7 +130,7 @@ Un boton para cerrar que puede ser agregado.
```
:::
### Centered text
### Texto centrado
Utiliza el atributo `center` para centrar el texto.
:::demo
......@@ -181,10 +181,10 @@ Utiliza el atributo `center` para centrar el texto.
:::
:::warning
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinamico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir facilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurece que el contendio de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
:::
### Metodos Globales
### Métodos Globales
Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puede llamar a `Message` como lo hicimos en esta pagina.
......@@ -196,7 +196,7 @@ Import `Message`:
import { Message } from 'element-ui';
```
En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
### Options
| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
......@@ -206,14 +206,15 @@ En este caso deberia llamar al metodo `Message(options)`. Tambien se han registr
| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false |
| customClass | nombre de clase personalizado para el componente Message | string | — | — |
| duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 |
| showClose | utilizado para mostrar un boton para cerrar | boolean | — | false |
| duration | muestra la duración,en milisegundos. si se establece en 0, este no se apagara automáticamente | number | — | 3000 |
| showClose | utilizado para mostrar un botón para cerrar | boolean | — | false |
| center | utilizado para centrar el texto | boolean | — | false |
| onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — |
| offset | set the distance to the top of viewport | number | — | 20 |
| onClose | función callback ejecutada cuando se cierra con una instancia de mensaje como parámetro | function | — | — |
| offset | La distancia desde la parte superior del viewport | number | — | 20 |
### Metodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
| Metodo | Descripcion |
### Métodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al método `close`.
| Método | Descripción |
| ------ | ---------------------------- |
| close | cierra el componente Message |
examples/docs/es/notification.md
View file @ 0de427a3
......@@ -113,7 +113,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
```
:::
### Posicion personalizada
### Posición personalizada
La notificación puede surgir de cualquier rincón que uno desee.
......@@ -280,7 +280,7 @@ Es posible ocultar el botón de cerrar
```
:::
### Metodo global
### Método global
Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página.
......@@ -292,26 +292,26 @@ Importar `Notification`:
import { Notification } from 'element-ui';
```
En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al metodo `Notification.closeAll()` para cerrar manualmente todas las instancias.
En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. Puede llamar al método `Notification.closeAll()` para cerrar manualmente todas las instancias.
### Opciones
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- |
| title | titulo | string | — | — |
| message | mensaje | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false |
| type | tipo de notificacion | string | success/warning/info/error | — |
| iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — |
| customClass | nombre de clase personalizado para la notificacion | string | — | — |
| duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 |
| position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | si se muestra el boton de cerrar | boolean | — | true |
| onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — |
| onClick | funcion que se ejecuta cuando se hace click en la notificación | function | — | — |
| offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 |
### Metodos
`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------------ | ------------------------------------------------------------ | ---------------- | ------------------------------------------- | ----------- |
| title | titulo | string | — | — |
| message | mensaje | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false |
| type | tipo de notificación | string | success/warning/info/error | — |
| iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — |
| customClass | nombre de clase personalizado para la notificación | string | — | — |
| duration | duración antes de cerrar. Si no se quiere que se cierre automáticamente este valor debe estar a 0 | number | — | 4500 |
| position | posición personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | si se muestra el botón de cerrar | boolean | — | true |
| onClose | función que se ejecuta cuando la notificación se cierra | function | — | — |
| onClick | función que se ejecuta cuando se hace clic en la notificación | function | — | — |
| offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 |
### Métodos
`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
| Metodo | Descripción |
| ------ | ---------------------- |
......
examples/docs/es/page-header.md
View file @ 0de427a3
## PageHeader
If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.
Si la ruta de la página es simple, se recomienda utilizar PageHeader en lugar de Breadcrumb.
### Basic
### Básico
:::demo
```html
......@@ -18,22 +18,26 @@ If path of the page is simple, it is recommended to use PageHeader instead of th
}
}
</script>
```html
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |------------------------------ | ------ |
| title | main title | string | — | Back |
| content | content | string | — | — |
| title | titulo principal | string | — | Back |
| content | contenido | string | — | — |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre evento | Descripción | Parámetros |
|----------- |-------------- |----------- |
| back | triggers when right side is clicked | — |
| back | se activa cuando se hace clic en el lado derecho | — |
### Slots
| slot | Description |
|---------- | ---------------------- |
| title | title content |
| content | content |
| Nombre del slot | Descripción |
| --------------- | ----------- |
| title | titulo |
| content | contenido |
```
```
\ No newline at end of file
examples/docs/es/pagination.md
View file @ 0de427a3
......@@ -22,7 +22,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
```
:::
### Numeros de paginas
### Números de paginas
:::demo De forma predeterminada, Pagination colapsa los botones del paginador adicionales cuando tiene más de 7 páginas. Esto se puede configurar con el atributo `pager-count`.
```html
......@@ -51,7 +51,7 @@ Usa una paginación pequeña en caso de espacio limitado.
### Más elementos
Agrega más modulos basados en su escenario.
Agrega más módulos basados en su escenario.
:::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
......@@ -177,8 +177,8 @@ Cuando sólo hay una página, oculte la paginación configurando el atributo `hi
| ----------------- | --------------------------------------- | ----------------------------- |
| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` |
| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` |
| prev-click | Se dispara cuando el boton `prev` recibe el click y la pagina actual cambia | la nueva pagina actual |
| next-click | Se dispara cuando el boton `next` recibe el click y la pagina actual cambia | la nueva pagina actual |
| prev-click | Se dispara cuando el botón `prev` recibe el clic y la pagina actual cambia | la nueva pagina actual |
| next-click | Se dispara cuando el botón `next` recibe el clic y la pagina actual cambia | la nueva pagina actual |
### Slot
| Nombre | Descripción |
......
examples/docs/es/popover.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. En cuanto al elemento desencadenante, puedes escribirlo de dos maneras diferentes: usando el `slot="reference"`[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), o usando la directiva `v-popover` y poniendo el `ref` de Popover.
```html
<template>
......@@ -146,12 +146,12 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| disabled | si el popover está deshabilitado | boolean | — | false |
| value / v-model | si el popover está visible | Boolean | — | false |
| offset | popover offset | number | — | 0 |
| transition | popover transition animation | string | — | el-fade-in-linear |
| transition | animación de transición del popover | string | — | el-fade-in-linear |
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
### Slot
| Nombre | Descripción |
......@@ -163,6 +163,6 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| Nombre del evento | Descripción | Parámetros |
| ----------------- | --------------------------------------- | ---------- |
| show | se dispara cuando se muestra el popover | — |
| after-enter | se dispara cuando la transicion de entrada termina | — |
| after-enter | se dispara cuando la transición de entrada termina | — |
| hide | se dispara cuando se oculta el popover | — |
| after-leave | se dispara cuando la transicion de salida termina | — |
| after-leave | se dispara cuando la transición de salida termina | — |
examples/docs/es/progress.md
View file @ 0de427a3
......@@ -3,7 +3,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
### Barra de progreso lineal
:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
:::demo Usa el atributo `percentage` para asignar el porcentaje. Este es **requerido** y tiene que ser un valor entre `0-100`. Puede personalizar el formato de texto estableciendo `format`.
```html
<el-progress :percentage="50"></el-progress>
......@@ -24,8 +24,8 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
```
:::
### Pporcentage interno
En este caso el porcentage no toma espacio adicional.
### Porcentaje interno
En este caso el porcentaje no toma espacio adicional.
:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
```html
......@@ -36,9 +36,9 @@ En este caso el porcentage no toma espacio adicional.
```
:::
### Custom color
### Color personalizado
You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
Puede utilizar el atributo `color` para establecer el color de la barra de progreso.
:::demo
......@@ -110,9 +110,9 @@ You can use `color` attr to set the progress bar color. it accepts color string,
```
:::
### Dashboard progress bar
### Barra de progreso del panel de control
:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
:::demo También puede especificar el atributo `type` a `dashboard` para usar la barra de progreso del panel de control.
```html
<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
......
examples/docs/es/quickstart.md
View file @ 0de427a3
......@@ -18,7 +18,7 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
#### Importando todo
In main.js:
En main.js:
```javascript
import Vue from 'vue';
......@@ -233,7 +233,9 @@ Vue.prototype.$message = Message;
### Configuración global
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes. The property `zIndex` sets the initial z-index (default: 2000) for modal boxes:
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene dos propiedades: `size`, `zIndex`. `size` define el tamaño por defecto de todos los componentes.
La propiedad `zIndex` indica el z-index inicial (por defecto: 2000) para los modal:
Importando Element completamente：
......@@ -253,7 +255,7 @@ Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);
```
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. The initial z-index of modal boxes is 3000.
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. El valor inicial de z-index para los modals se ha establecido a 3000.
### Empiece ya!
......
examples/docs/es/radio.md
View file @ 0de427a3
......@@ -178,7 +178,7 @@ Radio con estilo de botón.
| disabled | si el Radio está deshabilitado | boolean | — | false |
| border | agregar borde alrededor del elemento Radio | boolean | — | false |
| size | tamaño del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | — |
| name | atributo nativo 'name' | string | — | — |
| name | atributo nativo `name` | string | — | — |
### Atributos de Radio-button
......@@ -186,7 +186,7 @@ Radio con estilo de botón.
| -------- | ------------------------------ | --------------- | ---------------- | ----------- |
| label | el valor del Radio | string / number | — | — |
| disabled | si el Radio está deshabilitado | boolean | — | false |
| name | atributo nativo 'name' | string | — | — |
| name | atributo nativo `name` | string | — | — |
### Atributos de Radio-group
......@@ -194,7 +194,7 @@ Radio con estilo de botón.
| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
| value / v-model | valor enlazado | string / number / boolean | — | — |
| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — |
| disabled | si la anidación de radios está desahabilitada | boolean | — | false |
| disabled | si la anidación de radios está deshabilitada | boolean | — | false |
| text-color | color de las letras cuando el botón está activo | string | — | #ffffff |
| fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF |
......
examples/docs/es/rate.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@ Usado para la calificación
### Uso básico
:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. Or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.
:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. O puede asignarlos con un objeto cuya clave es el umbral entre dos niveles y cuyo valor es el color correspondiente.
```html
......@@ -122,7 +122,7 @@ La calificación de solo lectura es para mostrar la puntuación. Soporta media e
| allow-half | si escoger media estrella está permitido | boolean | — | false |
| low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 |
| high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 |
| colors | colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| colors | colores para los iconos. Si se trata de una matriz, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, si se trata de un objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser el color correspondiente. | array/object | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color para iconos no seleccionados | string | — | #C6D1DE |
| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 |
| icon-classes | nombres de clase de los iconos. Si es array, debe tener 3 elementos, cada uno de los cuales corresponde a un nivel de puntuación, en caso contrario, si es objeto, la clave debe ser el valor umbral entre dos niveles, y el valor debe ser la clase de icono correspondiente. | array/object | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
......
examples/docs/es/select.md
View file @ 0de427a3
......@@ -541,16 +541,16 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
| size | tamaño del Input | string | large/small/mini | — |
| clearable | si el select puede ser limpiado | boolean | — | false |
| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| multiple-limit | máximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| name | el atributo `name` del input seleccionado | string | — | — |
| autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off |
| auto-complete | @DEPRECATED en la proxima major version | string | — | off |
| auto-complete | @DEPRECATED en la proxima major versión | string | — | off |
| placeholder | placeholder | string | — | Select |
| filterable | si Select es filtrable | boolean | — | false |
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
| filter-method | metodo de filtrado personalizado | function | — | — |
| remote | si las opciones se traeran desde el servidor | boolean | — | false |
| remote-method | metodo de busqueda remota personalizada | function | — | — |
| filter-method | método de filtrado personalizado | function | — | — |
| remote | si las opciones se traerán desde el servidor | boolean | — | false |
| remote-method | método de búsqueda remota personalizada | function | — | — |
| loading | si Select está cargando datos del servidor | boolean | — | false |
| loading-text | texto mostrado durante la carga de datos del servidor, también puedes usar la configuración de slot = "empty" | string | — | Loading |
| no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. También puedes usar la configuración de slot = "empty" | string | — | No matching data |
......@@ -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 |
### Eventos Select
| Nombre | Descripción | Parametros |
| -------------- | ---------------------------------------- | ---------------------------------------- |
| change | se dispara cuando el valor del select cambia | valor actual del select |
| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
| blur | se dispara cuando el input pierde el foco | (event: Event) |
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
| Nombre | Descripción | Parametros |
| -------------- | ------------------------------------------------------------ | ----------------------------------------- |
| change | se dispara cuando el valor del select cambia | valor actual del select |
| visible-change | se dispara cuando el menú desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| remove-tag | se dispara cuando un tag es removido en modo múltiple | el valor del tag removido |
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
| blur | se dispara cuando el input pierde el foco | (event: Event) |
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
### Select Slots
| Name | Description |
......
examples/docs/es/slider.md
View file @ 0de427a3
......@@ -93,7 +93,7 @@ Las opciones pueden ser discretas.
### Slider con input
Inserte el valor a traves de un input
Inserte el valor a través de un input
:::demo Configure el atributo `show-input` para que muestre un input a la derecha.
......@@ -217,11 +217,11 @@ Se soporta la selección de un rango de valores.
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
| value / v-model | valor enlazado | number | — | 0 |
| min | valor minimo | number | — | 0 |
| min | valor mínimo | number | — | 0 |
| max | valor máximo | number | — | 100 |
| disabled | si el Slider esta deshabitado | boolean | — | false |
| step | tamaño del paso | number | — | 1 |
| show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
| show-input | Si se muestra el input, trabaja cuando `range`es false | boolean | — | false |
| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
| input-size | tamaño del input | string | large / medium / small / mini | small |
| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
......
examples/docs/es/steps.md
View file @ 0de427a3
......@@ -35,11 +35,11 @@ Barra de pasos simple.
```
:::
### Step bar con el status
### Step bar con el estatus
Muestra el estado del step para cada paso.
:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobrescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
```html
<el-steps :space="200" :active="1" finish-status="success">
......@@ -79,7 +79,7 @@ Puede poner una descripción para cada paso.
```
:::
### Step bar with icon
### Step bar con icono
En la barra de pasos se pueden utilizar diversos iconos personalizados.
......@@ -133,15 +133,15 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
### Steps atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
| direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | actual paso de activación | number | — | 0 |
| process-status | status del paso actual | string | wait / process / finish / error / success | process |
| finish-status | status del paso final | string | wait / process / finish / error / success | finish |
| align-center | centrado de título y descripción | boolean | — | false |
| simple | si aplicar un tema simple | boolean | - | false |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------------------------------------ | --------------- | ----------------------------------------- | ----------- |
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
| direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | actual paso de activación | number | — | 0 |
| process-status | estatus del paso actual | string | wait / process / finish / error / success | process |
| finish-status | estatus del paso final | string | wait / process / finish / error / success | finish |
| align-center | centrado de título y descripción | boolean | — | false |
| simple | si aplicar un tema simple | boolean | - | false |
### Step atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
......@@ -156,5 +156,5 @@ Step bar simple, donde se ignorará `align-center`, `description`, `direction` y
| ----------- | -------------------- |
| icon | Icono personalizado |
| title | Titulo del paso |
| description | Descripcion del paso |
| description | Descripción del paso |
examples/docs/es/switch.md
View file @ 0de427a3
## Switch
Switch es utilizdo para realizar cambios entre dos estados opuestos.
Switch es utilizado para realizar cambios entre dos estados opuestos.
### Uso básico
......@@ -121,8 +121,8 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
| value / v-model | valor enlazado | boolean / string / number | — | — |
| disabled | si Switch esta deshabilitado | boolean | — | false |
| width | ancho del componente Switch | number | — | 40 |
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | — |
| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string | — | — |
| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobrescribe `active-text` | string | — | — |
| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobrescribe `inactive-text` | string | — | — |
| active-text | texto mostrado en el estado `on` | string | — | — |
| inactive-text | texto mostrado en el estado `off` | string | — | — |
| active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true |
......
examples/docs/es/table.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/tabs.md
View file @ 0de427a3
......@@ -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) | — | — |
### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ----------------------------- |
| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace click al botón tab-add | — |
| Nombre de Evento | Descripción | Parámetros |
| ---------------- | ------------------------------------------------------------ | ----------------------------- |
| tab-click | se lanza cuando se hace clic a una pestaña | pestaña clickeada |
| tab-remove | se lanza cuando se hace clic al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace clic al botón tab-add | — |
| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) |
### Attributos del Tab-pane
### Atributos del Tab-pane
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
| -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ |
| label | título de la pestaña | string | — | — |
......
examples/docs/es/tag.md
View file @ 0de427a3
......@@ -187,13 +187,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
| type | component type | string | success/info/warning/danger | — |
| type | tipo de Tag | string | success/info/warning/danger | — |
| closable | si el Tag puede ser removido | boolean | — | false |
| disable-transitions | si se deshabilitan las animaciones | boolean | — | false |
| hit | si el Tag tiene un borde resaltado | boolean | — | false |
| color | color de fondo del Tag | string | — | — |
| size | tamaño del Tag | string | medium / small / mini | — |
| effect | component theme | string | dark / light / plain | light |
| effect | Tema del Tag | string | dark / light / plain | light |
### Eventos
......
examples/docs/es/time-picker.md
View file @ 0de427a3
......@@ -4,7 +4,7 @@ Use el Time Picker para input de tipo time.
### Selector de tiempo fijo
Provee una lista de tiempo fijo para que los usuarios escogan.
Provee una lista de tiempo fijo para que los usuarios escojan.
:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
```html
......
examples/docs/es/timeline.md
View file @ 0de427a3
......@@ -140,7 +140,7 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
|---------- |-------- |---------- |------------- |-------- |
| timestamp | Contenido de las marcas de tiempo | string | - | — |
| hide-timestamp | Si se muestra o no timestamp | boolean | — | false |
| placement | la posicion de timestamp | string | top / bottom | bottom |
| placement | la posición de timestamp | string | top / bottom | bottom |
| type | tipo de nodo | string | primary / success / warning / danger / info | - |
| color | color de fondo del nodo | string | hsl / hsv / hex / rgb | - |
| size | tamaño del nodo | string | normal / large | normal |
......@@ -149,5 +149,5 @@ Las marcas de tiempo ( timestamp ) puede colocarse encima del contenido cuando
### Timeline-Item Slot
| name | Description |
|------|--------|
| — | Contenido personalizado del item del timeline |
| dot | Definicion personalizada del nodo |
| — | Contenido personalizado del ítem del timeline |
| dot | Definición personalizada del nodo |
examples/docs/es/tooltip.md
View file @ 0de427a3
......@@ -99,7 +99,7 @@ Tooltip tiene 9 colocaciones.
### Tema
Tooltip tiene dos temas: `dark` and `light`.
Tooltip tiene dos temas: `dark` y `light`.
:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
```html
......@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` and `light`.
Despliegue múltiples líneas de texto y establezca su formato.
:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
```html
<el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div>
......@@ -133,7 +133,7 @@ el atributo `transition` permite personalizar la animación con la que el Toolti
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper.
:::demo
```html
......@@ -168,7 +168,6 @@ De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/ele
```
:::
:::tip
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
......
examples/docs/es/transfer.md
View file @ 0de427a3
## Transfer
### Uso básico
:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del ítem, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array.
```html
<template>
<el-transfer
......@@ -38,7 +38,7 @@
Puede buscar y filtrar los items.
:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
```html
<template>
<el-transfer
......@@ -81,9 +81,9 @@ Puede buscar y filtrar los items.
### Personalizable
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de estatus de la cabecera y el contenido del pie.
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Plus, you can also use scoped slot to customize data items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Además, también puede utilizar el scoped-slot para personalizar los elementos de datos. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
```html
<template>
<p style="text-align: center; margin: 0 0 20px">Customize data items using render-content</p>
......@@ -238,7 +238,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Scoped Slot
| Name | Description |
|------|--------|
| — | Contenido personalizado para los datos de los items. El parametro del scope es { option } |
| — | Contenido personalizado para los datos de los items. El parámetro del scope es { option } |
### Methods
| Method | Description | Parameters |
......@@ -248,6 +248,6 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Eventos
| Nombre | Descripcion | Parametros |
| ------ | ---------------------------------------- | ---------------------------------------- |
| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
| right-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista derecha. | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
examples/docs/es/transition.md
View file @ 0de427a3
......@@ -99,6 +99,7 @@ Puede usar directamente las transiciones incorporadas en Element. Antes de hacer
### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`.
:::demo
```html
<template>
<div>
......@@ -140,7 +141,7 @@ Para efectos de colapsado usar el componente `el-collapse-transition`.
```
:::
### On demand
### Bajo demanda
```js
// fade/zoom
......
examples/docs/es/tree.md
View file @ 0de427a3
This diff is collapsed.
examples/docs/es/upload.md
View file @ 0de427a3
......@@ -268,33 +268,33 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
:::
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------------- | ---------------------------------------- | ---------------------------------- | ------------------------- | ----------- |
| action | obligatorio, URL de la petición | string | — | — |
| headers | cabeceras de la petición | object | — | — |
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
| data | opciones adicionales de la petición | object | — | — |
| name | nombre clave del archivo | string | — | file |
| with-credentials | especifica si enviará cookies | boolean | — | false |
| 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 |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---------------- | ------------------------------------------------------------ | ---------------------------------- | ------------------------- | ----------- |
| action | obligatorio, URL de la petición | string | — | — |
| headers | cabeceras de la petición | object | — | — |
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
| data | opciones adicionales de la petición | object | — | — |
| name | nombre clave del archivo | string | — | file |
| with-credentials | especifica si enviará cookies | boolean | — | false |
| 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 |
| 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-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | — |
| 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-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-progress | _hook_ lanzado cuando se produce algún progreso | function(event, 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-change | _hook_ lanzado cuando el archivo seleccionado se carga correctamente o falla | function(file, fileList) | — | — |
| before-upload | _hook_ lanzado antes de que el archivo sea cargado. Si este devuelve `true` o `Promise` entonces será rechazado, la carga puede ser cancelada | function(file) | — | — |
| before-remove | _hook_ lanzado antes de eliminar un archivo. Los parametros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList) | — | — |
| thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false |
| before-remove | _hook_ lanzado antes de eliminar un archivo. Los parámetros son el archivo y la lista de archivos. Si se devuelve `false` o se devuelve una `Promise` y que luego es rechazada, la eliminación será abortada. | function(file, fileList) | — | — |
| thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false |
| file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
| list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
| auto-upload | se especifica si se autocargan archivos | boolean | — | true |
| http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
| list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
| auto-upload | se especifica si se autocargan archivos | boolean | — | true |
| http-request | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
### Slot
| 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