test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revision of documentation in Spanish

Browse Source
This commit is contained in:
Gonzalo Nandez 2017-12-03 11:03:06 +01:00 committed by 杨奕
parent 91fece12ba
commit 6123ee70a3
42 changed files with 904 additions and 905 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
examples/docs/es/alert.md
View File

@ -49,11 +49,11 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec
``` ```
::: :::
### Customización del botón de cerrar ### Personalización del botón de cerrar
Customizá el botón de cerrar como texto u otros símbolos. Personalizar el botón de cerrar como texto u otros símbolos.
::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son customizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puedes configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. Ten cuidado que el atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra. ::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
```html ```html
@ -208,18 +208,18 @@ Descripción incluye un mensaje con información más detallada.
::: :::
### Atributos ### Atributos
| Atributo | Descrpción | Tipo | Valores válidos | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- |
| **title** | Título **REQUIRED** | string | — | — | | title | título. Requerido | string | — | — |
| type | tipo de componente | string | success/warning/info/error | info | | type | tipo de componente | string | success/warning/info/error | info |
| description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — | | description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — |
| closable | si se puede cerrar o no | boolean | — | true | | closable | si se puede cerrar o no | boolean | — | true |
| center | si el texto debe estar centrado | boolean | — | false | | center | si el texto debe estar centrado | boolean | — | false |
| close-text | texto de cerrado customizado | string | — | — | | close-text | texto de cerrado personalizado | string | — | — |
| show-icon | si un icono del tipo de alerta se debe mostrar| boolean | — | false | | show-icon | si un icono del tipo de alerta se debe mostrar | boolean | — | false |
### Eventos ### Eventos
| Nombre del evento | Descripción | Parámetros | | Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- | | ----------------- | ------------------------------------- | ---------- |
| close | Se dispara cuando la alerta se cierra | — | | close | Se dispara cuando la alerta se cierra | — |

18
examples/docs/es/badge.md
View File

@ -43,7 +43,7 @@ Muestra la cantidad de mensajes nuevos.
### Valor máximo ### Valor máximo
Se puede customizar el valor máximo. Se puede personalizar el valor máximo.
::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`. ::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
@ -64,11 +64,11 @@ Se puede customizar el valor máximo.
``` ```
::: :::
### Customizaciones ### Personalizaciones
Mostrar texto en vez de números. Mostrar texto en vez de números.
:::demo Cuando `value` es un `String`, puede mostrar texto customizado. :::demo Cuando `value` es un `String`, puede mostrar texto personalizado.
```html ```html
<el-badge value="new" class="item"> <el-badge value="new" class="item">
@ -130,9 +130,9 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
</style> </style>
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|------------- |---------------- |---------------- |---------------------- |-------- | | -------- | ---------------------------------------- | -------------- | ----------------- | ----------- |
| value | valor a mostrar | string, number | — | — | | value | valor a mostrar | string, number | — | — |
| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — | | max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — |
| 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 | hidden badge | boolean | — | false | | hidden | hidden badge | boolean | — | false |

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

@ -1,6 +1,6 @@
## Breadcrumb ## Breadcrumb
Muestra la locación de la página actual, haciendo más fácil el poder ir a la página anterior. Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior.
### Uso básico ### Uso básico
@ -19,7 +19,7 @@ Muestra la locación de la página actual, haciendo más fácil el poder ir a la
### Icono separador ### Icono separador
:::demo Setea `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator` :::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
```html ```html
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
@ -32,16 +32,16 @@ Muestra la locación de la página actual, haciendo más fácil el poder ir a la
::: :::
### Breadcrumb atributos ### Breadcrumb atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default| | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------------- | -------------------------------------- | ------ | ----------------- | ----------- |
| separator | caracter separador | string | — | / | | separator | caracter 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
| Atributo | Descripción | Tipo | Valores aceptados | Default| | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ---------------------------------------- | ------------- | ----------------- | ----------- |
| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — | | to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — |
| replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false | | replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false |

28
examples/docs/es/button.md
View File

@ -8,11 +8,11 @@
} }
.el-button-group { .el-button-group {
margin-bottom: 20px; margin-bottom: 20px;
.el-button + .el-button { .el-button + .el-button {
margin-left: 0; margin-left: 0;
} }
& + .el-button-group { & + .el-button-group {
margin-left: 10px; margin-left: 10px;
} }
@ -134,7 +134,7 @@ Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones
Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga. Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
:::demo Sete el atributo `loading` a `true` para mostrar el estado de descarga. :::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga.
```html ```html
<el-button type="primary" :loading="true">Loading</el-button> <el-button type="primary" :loading="true">Loading</el-button>
@ -164,14 +164,14 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
::: :::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ----------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
| size | tamaño del botón | string | medium / small / mini | — | | size | tamaño del botón | string | medium / small / mini | — |
| 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 |
| 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 |

8
examples/docs/es/carousel.md
View File

@ -61,11 +61,11 @@
</style> </style>
## Carousel ## Carousel
Presentar una serie de imágenes o textos en un espacio limitado Presenta una serie de imágenes o textos en un espacio limitado
### Uso básico ### Uso básico
::: demo Combina `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador. ::: demo Combine `el-carousel` con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije `trigger` para `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
```html ```html
<template> <template>
@ -213,7 +213,7 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
::: :::
### Atributos de Carousel ### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por Defecto | | Atributo | Descripcion | 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 |
@ -237,7 +237,7 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
| 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 |
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- | | -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — | | name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — |
| label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — | | label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — |

2
examples/docs/es/cascader.md
View File

@ -1673,7 +1673,7 @@ Buscar y seleccionar opciones con una palabra clave.
| Atributo | Descripción | Tipo | Opciones | Por defecto | | Atributo | Descripción | Tipo | Opciones | Por defecto |
| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- | | ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
| options | datos de las opciones | array | — | — | | options | datos de las opciones | array | — | — |
| props | opciones de configuration, mire la tabla siguiente | object | — | — | | props | opciones de configuracion, mire la tabla siguiente | object | — | — |
| value | valor seleccionado | array | — | — | | value | valor seleccionado | array | — | — |
| popper-class | nombre de clase para el Cascader's dropdown | string | — | — | | popper-class | nombre de clase para el Cascader's dropdown | string | — | — |
| placeholder | input placeholder | string | — | Select | | placeholder | input placeholder | string | — | Select |

68
examples/docs/es/checkbox.md
View File

@ -197,7 +197,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona
Checkbox con estilo tipo Botón. Checkbox con estilo tipo Botón.
:::demo Sólo debes cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`. :::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`.
```html ```html
<template> <template>
<div> <div>
@ -284,44 +284,44 @@ Checkbox con estilo tipo Botón.
::: :::
### Atributos de Checkbox ### Atributos de Checkbox
| Atributo | Descripción | Tipo | Opciones | Por defecto| | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
| label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — | | label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — |
| true-label | valor del Checkbox si está marcado | string / number | — | — | | true-label | valor del Checkbox si está marcado | string / number | — | — |
| false-label | valor del Checkbox si no está marcado | string / number | — | — | | false-label | valor del Checkbox si no está marcado | string / number | — | — |
| 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 |
### Eventos de Checkbox ### Eventos de Checkbox
| Nombre | Descripción | Parametros | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | | ------ | ---------------------------------------- | -------------------- |
| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
### Atributos de Checkbox-group ### Atributos de Checkbox-group
| Atributo | Descripción | Tipo | Opciones | Por Defecto| | Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|---------- |-------- |---------- |------------- |-------- | | ---------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — | | size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — |
| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false | | disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false |
| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — | | min | cantidad mínima de checkboxes que deben ser marcados | number | — | — |
| max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — | | max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — |
|text-color | color de fuente cuando el botón está activo | string | — | #ffffff | | text-color | color de fuente cuando el botón está activo | string | — | #ffffff |
|fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF | | fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF |
### Eventos de Checkbox-group ### Eventos de Checkbox-group
| Nombre de Evento | Descripción | Parametros | | Nombre de Evento | Descripción | Parametros |
|---------- |-------- |---------- | | ---------------- | ---------------------------------------- | -------------------- |
| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | | change | se ejecuta cuando el valor enlazado cambia | el valor actualizado |
### Atributos de Checkbox-button ### Atributos de Checkbox-button
| Atributo | Descripción | Tipo | Opciones | Por defecto| | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
| label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — | | label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — |
| true-label | valor del checkbox si este está marcado | string / number | — | — | | true-label | valor del checkbox si este está marcado | string / number | — | — |
| false-label | valor del checkbox si este no está marcado | string / number | — | — | | false-label | valor del checkbox si este no está marcado | string / number | — | — |
| disabled | especifica si el checkbox está deshabilitado | boolean | — | false | | disabled | especifica si el checkbox está deshabilitado | boolean | — | false |
| name | atributo 'name' del checbox nativo | string | — | — | | name | atributo 'name' del checbox nativo | string | — | — |
| checked | si el checkbox está marcado | boolean | — | false | | checked | si el checkbox está marcado | boolean | — | false |

26
examples/docs/es/collapse.md
View File

@ -30,7 +30,7 @@ Use Collapse para almacenar contenidos.
### Uso básico ### Uso básico
Puedes expandir varios paneles Puede expandir varios paneles
:::demo :::demo
```html ```html
@ -104,7 +104,7 @@ En modo acordeón sólo un panel puede ser expandido a la vez
### Título personalizado ### Título personalizado
Además de usar el atributo `title`, se puede personalizar el título del panel con named slots, esto hace posible agregar contenido personalizado, por ejemplo: iconos. Además de usar el atributo `title`, se puede personalizar el título del panel con slots con nombre, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
:::demo :::demo
```html ```html
@ -134,19 +134,19 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
::: :::
### Atributos de Collapse ### Atributos de Collapse
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
| accordion | especifica si activa el modo acordeón | boolean | — | false | | accordion | especifica si activa el modo acordeón | boolean | — | false |
| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — | | value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
### Eventos de Collapse ### Eventos de Collapse
| Nombre de Evento | Descripción | Parametros | | Nombre de Evento | Descripción | Parametros |
|---------|---------|---------| | ---------------- | ---------------------------------------- | ---------------------------------------- |
| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) | | change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
### Atributos de Collapse Item ### Atributos de Collapse Item
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ----------------------------- | ------------- | ----------------- | ----------- |
| name | identificador único del panel | string/number | — | — | | name | identificador único del panel | string/number | — | — |
| title | título del panel | string | — | — | | title | título del panel | string | — | — |

27
examples/docs/es/color-picker.md
View File

@ -46,7 +46,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
### Uso básico ### Uso básico
:::demo ColorPicker requiere una variable de tipo string para ser enlazada a v-model. :::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`.
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">Especifica valor por defecto</span> <span class="demonstration">Especifica valor por defecto</span>
@ -72,7 +72,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 agrega el atributo `show-alpha`. :::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`.
```html ```html
<el-color-picker v-model="color3" show-alpha></el-color-picker> <el-color-picker v-model="color3" show-alpha></el-color-picker>
@ -110,16 +110,17 @@ ColorPicker es un selector de color que soporta varios formatos de color.
::: :::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- |
| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false | | disabled | especifica si se deshabilita el ColorPicker | boolean | — | false |
| size | tamaño del ColorPicker | string | — | medium / small / mini | | size | tamaño del ColorPicker | string | — | medium / small / mini |
| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false | | show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
| color-format | formato de color del v-model | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) | | color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — | | popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
### Eventos ### Eventos
| Nombre de Evento | Descripción | Parametros | | Nombre de Evento | Descripción | Parametros |
|---------|--------|---------| | ---------------- | ---------------------------------------- | ---------------------- |
| change | se dispara cuando el valor del input cambia | valor del color | | change | se dispara cuando el valor del input cambia | valor del color |
| active-change | se dispara cuando el actual color activo cambia | valor del color activo | | active-change | se dispara cuando el actual color activo cambia | valor del color activo |

6
examples/docs/es/color.md
View File

@ -6,7 +6,7 @@
box-sizing: border-box; box-sizing: border-box;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
& .value { & .value {
font-size: 12px; font-size: 12px;
opacity: 0.69; opacity: 0.69;
@ -87,7 +87,7 @@ El color principal de Element es el azul brillante y amigable.
### Color secundario ### Color secundario
Además del color principal, necesitas utiizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa). Además del color principal, se necesitan utilizar distintos colores para diferentes escenarios (por ejemplo, el color en tono rojo indica una operación peligrosa).
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">
@ -106,7 +106,7 @@ Además del color principal, necesitas utiizar distintos colores para diferentes
### Color neutro ### Color neutro
Los colores neutrales son para texto, fondos y bordes. Puedes 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áquica.
<el-row :gutter="12"> <el-row :gutter="12">
<el-col :span="6"> <el-col :span="6">

29
examples/docs/es/container.md
View File

@ -4,11 +4,11 @@
color: #333; color: #333;
line-height: 60px; line-height: 60px;
} }
.el-aside { .el-aside {
color: #333; color: #333;
} }
#disenos-comunes + .demo-container { #disenos-comunes + .demo-container {
.el-header, .el-footer { .el-header, .el-footer {
text-align: center; text-align: center;
@ -72,8 +72,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 asegúrate que el navegador lo soporte. Además, los elementos directos de `<el-container>` tienen que 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>`.
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
@ -281,21 +280,21 @@ ser uno o más de los últimos cuatro componentes. Y el elemento padre de los ú
::: :::
### Atributos de contenedor ### Atributos de contenedor
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------- | ---------------------------------------- | ------ | --------------------- | ---------------------------------------- |
| direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal | | direction | dirección de diseño para elementos secundarios | string | horizontal / vertical | vertical cuando el elemento está anidado con `el-header`, de lo contrario, horizontal |
### Atributos de cabecera ### Atributos de cabecera
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | --------------------- | ------ | ----------------- | ----------- |
| height | altura de la cabecera | string | — | 60px | | height | altura de la cabecera | string | — | 60px |
### Atributos de barra lateral ### Atributos de barra lateral
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ------------------------- | ------ | ----------------- | ----------- |
| width | ancho de la barra lateral | string | — | 300px | | width | ancho de la barra lateral | string | — | 300px |
### Atributos de pie de página ### Atributos de pie de página
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ------------------------ | ------ | ----------------- | ----------- |
| height | altura del pie de página | string | — | 60px | | height | altura del pie de página | string | — | 60px |

30
examples/docs/es/custom-theme.md
View File

@ -1,13 +1,13 @@
## Tema personalizado ## Tema personalizado
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesitas remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, por ello, te proporcionamos 3 maneras de modificar los estilos. Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesita remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, para ello hay 3 maneras de modificar los estilos.
### Cambiando el color del tema ### Cambiando el color del tema
Si lo que buscas es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos. Si lo que se busca es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
Este sitio, te permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulta la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección). Este sitio, le permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulte la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
### Actualizando variables SCSS en tu proyecto ### Actualizando variables SCSS en tu proyecto
`theme-chalk` esta escrito en SCSS. Si tu proyecto también utiliza SCSS, puedes cambiar las variables de estilos de Element. Para ello, solo necesitas crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`: `theme-chalk` esta escrito en SCSS. Si su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
```html ```html
/* Color del tema */ /* Color del tema */
@ -19,7 +19,7 @@ $--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index"; @import "../node_modules/element-ui/packages/theme-chalk/src/index";
``` ```
Entonces, en el archivo principal del proyecto, importa este archivo de estilos en lugar de los estilos de Element: Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
```JS ```JS
import Vue from 'vue' import Vue from 'vue'
import Element from 'element-ui' import Element from 'element-ui'
@ -33,15 +33,15 @@ Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de la
::: :::
### CLI para generar temas ### CLI para generar temas
Si tu proyecto no utiliza SCSS, puedes personalizar el tema a través de esta herramienta: Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta:
#### <strong>Instalación</strong> #### <strong>Instalación</strong>
Primero, debes instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen tu proyecto, npm automáticamente los instalará para ellos. Primero, debe instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen su proyecto, npm automáticamente los instalará para ellos.
```shell ```shell
npm i element-theme -g npm i element-theme -g
``` ```
Ahora, instala el tema `chalk` desde npm o Github. Ahora, instale el tema `chalk` desde npm o Github.
```shell ```shell
# desde npm # desde npm
npm i element-theme-chalk -D npm i element-theme-chalk -D
@ -51,7 +51,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 tu CLI (si instalaste el paquete de manera local, utilizá `node_modules/.bin/et` en su lugar). Ejecuta `-i` para inicializar un archivo de variables, puedes especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puedes 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, 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.
```shell ```shell
et -i [custom output file] et -i [custom output file]
@ -59,7 +59,7 @@ et -i [custom output file]
> ✔ Generator variables file > ✔ Generator variables file
``` ```
En el archivo `element-variables.scss` podrás encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo: En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
```css ```css
$--color-primary: #409EFF !default; $--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
@ -81,13 +81,13 @@ $--color-info: #878d99 !default;
``` ```
#### <strong>Modificando variables</strong> #### <strong>Modificando variables</strong>
Solo debes modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo: Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
```CSS ```CSS
$--color-primary: red; $--color-primary: red;
``` ```
#### <strong>Construyendo el tema</strong> #### <strong>Construyendo el tema</strong>
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si deseas personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre. Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si desea personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
```shell ```shell
et et
@ -96,7 +96,7 @@ et
``` ```
#### <strong>Importar un tema personalizado</strong> #### <strong>Importar un tema personalizado</strong>
Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Tu puedes especificar un directorio distinto utilizando el parámetro `-o`. Importar tu propio tema es igual a como si importarás el tema por defecto, únicamente tienes que importar el archivo que se construyó: Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Puede especificar un directorio distinto utilizando el parámetro `-o`. Importar su propio tema es igual a como si importará el tema por defecto, únicamente tiene que importar el archivo que se construyó:
```javascript ```javascript
import '../theme/index.css' import '../theme/index.css'
@ -107,7 +107,7 @@ Vue.use(ElementUI)
``` ```
#### <strong>Importar un tema de componente bajo demanda</strong> #### <strong>Importar un tema de componente bajo demanda</strong>
Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo debes modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado tu tema personalizado relativo a `.babelrc`. Nota el carácter `~` es obligatorio: Si esta utilizando `babel-plugin-component` para importar bajo demanda, solo debe modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado su tema personalizado relativo a `.babelrc`. **Nota** el carácter `~` es obligatorio:
```json ```json
{ {
"plugins": [["component", [ "plugins": [["component", [
@ -119,4 +119,4 @@ Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo de
} }
``` ```
Si no estas familiarizado con `babel-plugin-component`, por favor dirígete a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulta el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`. Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.

86
examples/docs/es/datetime-picker.md
View File

@ -98,15 +98,15 @@
## DateTimePicker ## DateTimePicker
seleccionar fecha y tiempo juntos en una escoja. Seleccionar fecha y tiempo juntos en un picker.
:::tip :::tip
DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos,puedes referirse a DatePicker y TimePicker. DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos, puede referirse a DatePicker y TimePicker.
::: :::
### Fecha y hora ### Fecha y hora
:::demo Puedes seleccionar fecha y tiempo juntos en una escoja al mismo tiempo por establecer `type` a `datetime`.El método a utilizar atajos es mismo que Date Picker. :::demo Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker.
```html ```html
@ -167,7 +167,7 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
### Alcance de fecha y tiempo ### Alcance de fecha y tiempo
:::demo Puedes seleccionar fecha y tiempo por establecer `type` a `datetimerange`. :::demo Puede seleccionar la fecha y el rango de tiempo ajustando `type` a `datetimerange`.
```html ```html
<template> <template>
@ -236,49 +236,49 @@ DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más d
::: :::
### Atributos ### Atributos
| Atributos | Descripción | Tipo | Valores aceptados | Defecto | | Atributos | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | ---------- | | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | ----------- |
| readonly | cuando DatePicker es lectura sola | boolean | — | false | | readonly | si DatePicker es solo de lectura | boolean | — | false |
| disabled | cuando DatePicker es deshabilitada | boolean | — | false | | disabled | si DatePicker esta deshabilitada | boolean | — | false |
| editable | Si la entrada es editable | boolean | — | true | | editable | Si la entrada es editable | boolean | — | true |
| clearable | Si monstrar el botón de despejar | boolean | — | true | | clearable | Si mostrar el botón de `clear` | boolean | — | true |
| size | tamaño de la entrada | string | large/small/mini | — | | size | tamaño del input | string | large/small/mini | — |
| placeholder | placeholder en la modalidad sin-rango | string | — | — | | placeholder | placeholder cuando el modo NO es Range | string | — | — |
| start-placeholder | placeholder para el comienzo de fecha en la modalidad de alcance | string | — | — | | start-placeholder | placeholder para el inicio de fecha en el modo Range | string | — | — |
| end-placeholder | placeholder para el fin de fecha en la modalidad de alcance | string | — | — | | end-placeholder | placeholder para el fin de fecha en el modo Range | string | — | — |
| time-arrow-control | si se escoja tiempo utilizando botones de flecha | boolean | — | false | | time-arrow-control | si se puede modificar el `time` utilizando botones con flechas | boolean | — | false |
| type | tipo de la escoja | string | year/month/date/datetime/ week/datetimerange/daterange | date | | type | tipo del picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
| format | formato de valor mostrado en la caja de entrada | string | año `yyyy` mes `MM` día `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd | | format | formato de valor mostrado en el input | string | año `yyyy` mes `MM` día `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd |
| alinear | alineación | left/center/right | left | | | alinear | alineación | left/center/right | left | |
| popper-class | nombre de clase clientela por dropdown de DatePicker | string | — | — | | popper-class | nombre de clase personalizado para el Dropdown de DatePicker | string | — | — |
| picker-options | opciones adicionales, comproba la tabla abaja | object | — | {} | | picker-options | opciones adicionales, Comprueba la tabla de mas abajo | object | — | {} |
| range-separator | separador de alcance | string | - | '-' | | range-separator | separador de rango | string | - | '-' |
| default-value | fecha opcional y defectada del calendario | Fecha | cualquier cosa aceptada por `new Date()` — | | | default-value | opcional, fecha predeterminada del calendario | Fecha | cualquier cosa aceptada por `new Date()` — | |
| value-format | opcional,formato de valor atado.Si no special, el valor atado sería ser un valor de fecha | cadena | año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss` | — | | value-format | opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date | cadena | año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss` | — |
| name | igual que `name` en la entrada nativa | string | — | — | | name | igual que `name` en la entrada nativa | string | — | — |
| unlink-panels | desconectar dos fecha-paneles en alcance-escoja | boolean | — | false | | unlink-panels | desconectar dos date-panels en range-picker | boolean | — | false |
### Picker Options ### Picker Options
| Atributo | Descripción | Tipo | Valores aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ---------------------------------------- | -------- | ----------------- | ------- | | -------------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| shortcuts | un { text, onClick } objecto serie para establecer opciones atajos, comprobar la mesa abaja | objeto[] | — | — | | shortcuts | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | — | — |
| disabledDate | una función determinar si la fecha es minusválida con la fecha como su parámetro.Debería devolver un booleano | función | — | — | | disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — |
| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 | | firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 |
### atajos ### Accesos directos
| Atributo | Descripción | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | -------- | --------------- | ------- | | -------- | ---------------------------------------- | -------- | ----------------- | ----------- |
| text | title of the shortcut | string | — | — | | text | título del acceso directo | string | — | — |
| onClick | función de llama de vuelta, gatillos cuando el atajo se hace clic, con el `vm` como su parámetro. Puedes cambiar el valor de escoja por emitir el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — | | 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 | — | — |
### Eventos ### Eventos
| Nombre de evento | Descripción | Parámetros | | Nombre de evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ------------------------- | | ---------------- | ---------------------------------------- | ----------------------------- |
| change | gatillos cuando usuario confirma el valor | valor atado de componente | | change | Se dispara cuando el usuario confirma el valor | valor enlazado del componente |
| blur | gatillos cuando la entrada difumina | (event: Event) | | blur | Se dispara cuando el input pierde el foco | (event: Event) |
| focus | gatillos cuando la entrada enfoca | (event: Event) | | focus | Se dispara cuando el input obtiene el foco | (event: Event) |
### Métodos ### Métodos
| Método | Descripción | Parámetros | | Método | Descripción | Parámetros |
| ------ | -------------------------------- | ---------- | | ------ | ---------------- | ---------- |
| focus | enfoque la entrada de componente | — | | focus | foco en el input | — |

71
examples/docs/es/dialog.md
View File

@ -73,15 +73,15 @@
} }
</style> </style>
## Diálogo ## Dialog
Informar usuarios cuando preserva el estado de página corriente. Informar a usuarios preservando el estado de la página actual.
### Uso Básico ### Uso Básico
Diálogo que se surge una caja de diálogo,y es bastante personalizable. Dialog abre una caja de diálogo, y es bastante personalizable.
:::demo Establece el atributo con un `Boolean`, y Diálogo muestra cuando es `true`.El Diálogo tiene dos partes:`body` y `footer`, y el último exige un `slot`llamado `footer`.El atributo opcional `title` (vacío por defecto) es para definir un título.Finalmente,este ejemplo demostra cómo `before-close` es usado. :::demo Establezca el atributo `visible` con un booleano, y el Dialog se muestra cuando es `true`. El diálogo tiene dos partes: `body` y `footer`, este último requiere un slot llamado `footer`. El atributo `title` es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza `before-close`.
```html ```html
@ -122,13 +122,14 @@ Diálogo que se surge una caja de diálogo,y es bastante personalizable.
:::tip :::tip
`before-close` solamente funciona cuando usuarios se hacen clic el icono de cerrar o el fondo.Si tienes botones que cercan el Diálogo en el `footer` que se llamado slot,puedes añadir que harías con `before-close` en controlador del evento click de los botones. `before-close` sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado `footer`, puede agregar lo que haría `before-close` en el manejador de eventos de los botones.
::: :::
### Personalizaciones ### Personalizaciones
El contenido de Diálogo puede ser cualquier cosa,hasta una mesa o un formulario.Este ejemplo muestra cómo utilizar Mesa y Formulario de Element con Diálogo. El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog
:::demo :::demo
@ -207,8 +208,9 @@ El contenido de Diálogo puede ser cualquier cosa,hasta una mesa o un formulario
::: :::
### Diálogo anidado ### Diálogo anidado
Si un cuadro de diálogo está anidado en otro cuadro de diálogo,`append-to-body` es requerido. Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
:::demo Normalmente no recomendamos el uso de Diálogo anidado.Si necesitas varios cuadros de diálogo representados en la página,puedes aplastarlos simplemente así que serían hermanos el uno al otro.Si tienes que anidar un cuadro de diálogo dentro de otro cuadro de diálogo,establece `append-to-body` del diálogo anidado a verdadero,y se agregará al cuerpo en combio de su nodo padre,asi que ambos diálogos pueden ser renderizados correctamente.
:::demo Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca `append-to-body` del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.
```html ```html
<template> <template>
@ -244,9 +246,9 @@ Si un cuadro de diálogo está anidado en otro cuadro de diálogo,`append-to-bod
::: :::
### Contenido centrado ### Contenido centrado
el contenido de Diálogo se puede centrar. El contenido de Diálogo se puede centrar.
:::demo establecer `center` en `true` se centrará el encabezado y el pie de página del cuadro de diálogo horizontalmente. :::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente.
```html ```html
<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button> <el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
@ -276,35 +278,36 @@ el contenido de Diálogo se puede centrar.
::: :::
:::tip :::tip
`center` afecta a cabezazos y pies de Diálogo.El cuerpo de Diálogo puede ser cualquier cosa,asi que a veces no puede verse bien cuando está centrado.Necesitas escribir algunos CSS si quieres centrar el cuerpo también. `center` sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
::: :::
:::tip :::tip
Si el variable obligado a `visible` es manejado en el almacén Vuex,el `.sync` no puede funcionar correctamente.En este caso,quita el modificador `.sync` por favor,escucha a eventos `open` y `close` de Diálogo,y comete Vuex mutaciones para actualizar el valor de la variable en los controladores de eventos.
Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
::: :::
### Atributo ### Atributo
| Atributo | Descripción | Tipo | Valores aceptados | Defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ------- | | --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
| visible | visibilidad del Diálogo, apoya el modificador .sync | boolean | — | false | | visible | visibilidad del Diálogo, apoya el modificador .sync | boolean | — | false |
| title | título de Diálogo. También se puede pasar con una ranura nombrada (ver la tabla siguiente) | string | — | — | | title | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string | — | — |
| width | anchura de Diálogo | string | — | 50% | | width | anchura de Diálogo | string | — | 50% |
| fullscreen | si el diálogo ocupa pantalla completa | boolean | — | false | | fullscreen | si el diálogo ocupa pantalla completa | boolean | — | false |
| top | valor de `margin-top` del Diálogo CSS | string | — | 15vh | | top | valor de `margin-top` del Diálogo CSS | string | — | 15vh |
| modal | si se muestra una máscara | boolean | — | true | | modal | si se muestra una máscara | boolean | — | true |
| modal-append-to-body | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean | — | true | | modal-append-to-body | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean | — | true |
| append-to-body | Si adjuntar el cuadro de diálogo al cuerpo | boolean | — | false | | append-to-body | Si adjuntar el cuadro de diálogo al cuerpo | boolean | — | false |
| lock-scroll | Si voluta de cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean | — | true | | lock-scroll | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean | — | true |
| custom-class | nombres de clase personalizada para el Diálogo | string | — | — | | custom-class | nombres de clase personalizada para el Diálogo | string | — | — |
| close-on-click-modal | si el Diálogo puede ser cerrado por haciendo clic en la máscara | boolean | — | true | | close-on-click-modal | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean | — | true |
| close-on-press-escape | si el Diálogo puede ser cerrado por presionando ESC | boolean | — | true | | close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean | — | true |
| show-close | si mostrar un botón de cerrar | boolean | — | true | | show-close | si mostrar un botón de cerrar | boolean | — | true |
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitará el cuadro de diálogo de cerrar | función(done) `done`se usa para cerrar el diálog | — | — | | before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | — | — |
| center | si alinear el encabezado y el pie de página en el centro | boolean | — | false | | center | si alinear el encabezado y el pie de página en el centro | boolean | — | false |
### Ranura ### Slots
| Nombre | Descripcíon | | Nombre | Descripcíon |
| ------ | -------------------------------------- | | ------ | -------------------------------------- |
@ -313,7 +316,7 @@ Si el variable obligado a `visible` es manejado en el almacén Vuex,el `.sync` n
| footer | contenido del pie de página de Diálogo | | footer | contenido del pie de página de Diálogo |
### Eventos ### Eventos
| Nombre de Eventos | 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 | — |
| close | se dispara cuando el Diálogo se cierra | — | | close | se dispara cuando el Diálogo se cierra | — |

2
examples/docs/es/dropdown.md
View File

@ -86,7 +86,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones
::: :::
Elemento detonante ### Elemento detonante
Utilizando un botón para activar la lista desplegable. Utilizando un botón para activar la lista desplegable.

4
examples/docs/es/form.md
View File

@ -376,9 +376,7 @@ Cuando el espacio vertical es limitado y la forma es relativamente simple, puede
Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta. Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field. :::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
```html ```html
<el-radio-group v-model="labelPosition" size="small"> <el-radio-group v-model="labelPosition" size="small">

6
examples/docs/es/icon.md
View File

@ -38,14 +38,14 @@
color: #666; color: #666;
font-size: 13px; font-size: 13px;
transition: color .15s linear; transition: color .15s linear;
border-right: 1px solid #eee; border-right: 1px solid #eee;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
margin-right: -1px; margin-right: -1px;
margin-bottom: -1px; margin-bottom: -1px;
@utils-vertical-center; @utils-vertical-center;
& span { & span {
display: inline-block; display: inline-block;
line-height: normal; line-height: normal;

42
examples/docs/es/input-number.md
View File

@ -154,28 +154,28 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | ---------------------------------------- | ------- | --------------- | ---------- | | ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
| value | valor vinculado | number | — | — | | value | valor vinculado | number | — | — |
| min | el valor mínimo permitido | number | — | 0 | | min | el valor mínimo permitido | number | — | 0 |
| max | el valor maximo permitido | number | — | `Infinity` | | max | el valor maximo permitido | number | — | `Infinity` |
| step | incremento (salto) | number | — | 1 | | step | incremento (salto) | number | — | 1 |
| size | tamaño del componente | string | large/small | — | | size | tamaño del componente | string | large/small | — |
| disabled | si el componente esta deshabilitado | boolean | — | false | | disabled | si el componente esta deshabilitado | boolean | — | false |
| controls | si se activan los botones de control | boolean | — | true | | controls | si se activan los botones de control | boolean | — | true |
| debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 | | debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 |
| controls-position | posición de los botones de control | string | right | - | | controls-position | posición de los botones de control | string | right | - |
| name | lo mismo que `name` en un input nativo | string | — | — | | name | lo mismo que `name` en un input nativo | string | — | — |
| label | texto de la etiqueta | string | — | — | | label | texto de la etiqueta | string | — | — |
### Eventos ### Eventos
| Nombre | Descripción | Parámetros | | Nombre | Descripción | Parámetros |
| ---------- | ------------------------------- | ------------------ | | ------ | ---------------------------------------- | ------------------ |
| change | se produce cuando el valor cambia | value after change | | change | se produce cuando el valor cambia | value after change |
| blur | se produce cuando el componente pierde el foco | (event: Event) | | blur | se produce cuando el componente pierde el foco | (event: Event) |
| focus | se produce cuando el componente obtiene el foco | (event: Event) | | focus | se produce cuando el componente obtiene el foco | (event: Event) |
### Métodos ### Métodos
| Método | Descripción | Parámetro | | Método | Descripción | Parámetro |
| ------ | ------------------------- | ---------- | | ------ | ------------------------------------ | --------- |
| focus | coloca el foco en el elemento actual | - | | focus | coloca el foco en el elemento actual | - |

6
examples/docs/es/installation.md
View File

@ -8,7 +8,7 @@ npm i element-ui -S
``` ```
### CDN ### CDN
Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página. Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
```html ```html
<!-- import CSS --> <!-- import CSS -->
@ -22,7 +22,7 @@ Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un C
### Hello world ### Hello world
Si estás usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
@ -54,5 +54,5 @@ Si estás usando un CDN, una página con Hello-World es fácil con Element. [Onl
</script> </script>
</html> </html>
``` ```
Si estás usando npm y deseas combinarlo con webpack, por favor continúa a la siguiente página: Quick Start Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start

52
examples/docs/es/layout.md
View File

@ -37,7 +37,7 @@ Rápido y facilmente crea un layout básico con 24 columnas.
Crea un layout básico usando columnas. Crea un layout básico usando columnas.
:::**Demo** Con `row` y `col`, podemos facilmente manipular el layout usando el atributo `span`. :::**Demo** Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
```html ```html
<el-row> <el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@ -248,7 +248,7 @@ Puedes especificar offsets para las columnas.
Usa flex layout para un alineamiento flexible de columnas. Usa flex layout para un alineamiento flexible de columnas.
:::**Demo** Puedes habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around. :::**Demo** Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
```html ```html
<el-row type="flex" class="row-bg"> <el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@ -343,17 +343,17 @@ Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm
### Clases útiles para ocultar elementos ### Clases útiles para ocultar elementos
Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesitas importar el siguiente archivo CSS para usar estas clases: Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesita importar el siguiente archivo CSS para usar estas clases:
```js ```js
import 'element-ui/lib/theme-chalk/display.css'; import 'element-ui/lib/theme-chalk/display.css';
``` ```
Las clases son: Las clases son:
- `hidden-xs-only` - oculto en viewports extra pequenhos solamente - `hidden-xs-only` - oculto en viewports extra pequeños solamente
- `hidden-sm-only` - oculto en viewports pequenhos solamente - `hidden-sm-only` - oculto en viewports pequeños solamente
- `hidden-sm-and-down` - oculto en viewports pequenhos y menores - `hidden-sm-and-down` - oculto en viewports pequeños y menores
- `hidden-sm-and-up` - oculto en viewports pequenhos y superiores - `hidden-sm-and-up` - oculto en viewports pequeños y superiores
- `hidden-md-only` - oculto en viewports medios solamente - `hidden-md-only` - oculto en viewports medios solamente
- `hidden-md-and-down` - oculto en viewports medios y menores - `hidden-md-and-down` - oculto en viewports medios y menores
- `hidden-md-and-up` - oculto en viewports medios y mayores - `hidden-md-and-up` - oculto en viewports medios y mayores
@ -364,27 +364,27 @@ Las clases son:
### Atributos Row ### Atributos Row
| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | | Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- |
| gutter | espaciado de la grilla | number | — | 0 | | gutter | espaciado de la grilla | number | — | 0 |
| type | modo del layout , puedes usar flex, funciona en navegadores modernos| string | — | — | | type | modo del layout , puedes usar flex, funciona en navegadores modernos | string | — | — |
| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start | | justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start |
| align | alineación vertical del layout flex | string | top/middle/bottom | top | | align | alineación vertical del layout flex | string | top/middle/bottom | top |
| tag | tag de elemento propio | string | * | div | | tag | tag de elemento propio | string | * | div |
### Atributos Col ### Atributos Col
| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | | Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------------- |
| span | número de columnas que abarca la cuadrícula | number | — | 24 | | span | número de columnas que abarca la cuadrícula | number | — | 24 |
| offset | especific espacio en el lado izquierdo de la grill | number | — | 0 | | offset | especific espacio en el lado izquierdo de la grill | number | — | 0 |
| push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 | | push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 |
| pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 | | pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 |
| xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | | xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | tag de elemento propio | string | * | div | | tag | tag de elemento propio | string | * | div |

34
examples/docs/es/loading.md
View File

@ -26,7 +26,7 @@
fullscreenLoading: false fullscreenLoading: false
} }
}, },
methods: { methods: {
openFullScreen() { openFullScreen() {
this.fullscreenLoading = true; this.fullscreenLoading = true;
@ -115,9 +115,9 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
### Personalización ### Personalización
Puedes 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 Agrega 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 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.
```html ```html
<template> <template>
<el-table <el-table
@ -173,7 +173,7 @@ Puedes personalizar el texto de carga, spinner de carga y color de fondo.
Muestra una animación de pantalla completa mientras se cargan los datos Muestra una animación de pantalla completa mientras se cargan los datos
:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si deseas deshabilitas el desplazamiento en `body`, puedes agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto. :::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si desea deshabilitar el desplazamiento en `body`, puede agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.
```html ```html
<template> <template>
@ -223,7 +223,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
### Servicio ### Servicio
Puedes invocar el componente con un servicio. Importa el servicio: Puede invocar el componente con un servicio. Importe el servicio:
```javascript ```javascript
import { Loading } from 'element-ui'; import { Loading } from 'element-ui';
@ -232,7 +232,7 @@ Invocar:
```javascript ```javascript
Loading.service(options); Loading.service(options);
``` ```
El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y tú puedes cerrarlo invocando el método `close`: El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y puede cerrarlo invocando el método `close`:
```javascript ```javascript
let loadingInstance = Loading.service(options); let loadingInstance = Loading.service(options);
loadingInstance.close(); loadingInstance.close();
@ -245,16 +245,16 @@ console.log(loadingInstance1 === loadingInstance2); // true
``` ```
Llamar al método `close` en cualquiera de estas puede cerrarlo. Llamar al método `close` en cualquiera de estas puede cerrarlo.
Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puedes invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente. Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puede invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
### Options ### Options
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ----------- | ---------------------------------------- | ------------- | ----------------- | ------------- |
| target | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | — | document.body | | target | el nodo del DOM que el componente debe cubrir. Acepta un objecto DOM o una cadena. Si está es una cadena, este será pasado a `document.querySelector` para obtener el correspondiente nodo del DOM | object/string | — | document.body |
| body | igual que el modificador `body` de `v-loading` | boolean | — | false | | body | igual que el modificador `body` de `v-loading` | boolean | — | false |
| fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true | | fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true |
| lock | igual que el modificador `lock` de `v-loading` | boolean | — | false | | lock | igual que el modificador `lock` de `v-loading` | boolean | — | false |
| text | texto de cargando que se muestra debajo del spinner | string | — | — | | text | texto de cargando que se muestra debajo del spinner | string | — | — |
| spinner | nombre de clase del spinner personalizado | string | — | — | | spinner | nombre de clase del spinner personalizado | string | — | — |
| background | color de fondo de la máscara | string | — | — | | background | color de fondo de la máscara | string | — | — |
| customClass | nombre de clase personalizada para el componente | string | — | — | | customClass | nombre de clase personalizada para el componente | string | — | — |

74
examples/docs/es/menu.md
View File

@ -19,7 +19,7 @@
} }
.tac { .tac {
text-align: center; text-align: center;
.el-menu-vertical-demo { .el-menu-vertical-demo {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
@ -59,7 +59,7 @@ Menú que provee la navegación para tu sitio.
Top bar NavMenu puede ser usado en distinto escenarios. Top bar NavMenu puede ser usado en distinto escenarios.
:::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores. :::**Demo** Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
```html ```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@ -113,7 +113,7 @@ Top bar NavMenu puede ser usado en distinto escenarios.
NavMenu vertical con sub-menús. NavMenu vertical con sub-menús.
:::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`. :::**Demo** Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
```html ```html
<el-row class="tac"> <el-row class="tac">
@ -272,49 +272,49 @@ NavMenu vertical puede ser colapsado.
::: :::
### Atributos Menu ### Atributos Menu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
| mode | modo de presentación del menú | string | horizontal / vertical | vertical | | mode | modo de presentación del menú | string | horizontal / vertical | vertical |
| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false | | collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false |
| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff | | background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff |
| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 | | text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 |
| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF | | active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF |
| default-active | índice del menu-item activo | string | — | — | | default-active | índice del menu-item activo | string | — | — |
| 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 | whether only one sub-menu can be active | 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 | | menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | 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 verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
### Métodos Menu ### Métodos Menu
| Nombre de evento | Descripción | Parámetros | | Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- | | ---------------- | ----------------------------- | -------------------------------------- |
| open | abre un sub-menu específico | index: índice del sub-menu para abrir | | open | abre un sub-menu específico | index: índice del sub-menu para abrir |
| close | cierra un sub-menu específico | index: índice del sub-menu para cerrar | | close | cierra un sub-menu específico | index: índice del sub-menu para cerrar |
### Eventos Menu ### Eventos Menu
| Nombre de evento | Descripción | Parámetros | | Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- | | ---------------- | ---------------------------------------- | ---------------------------------------- |
| select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado | | select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado |
| open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido | | open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido |
| close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado | | close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado |
### Eventos Menu-Item ### Eventos Menu-Item
| Nombre de evento | Descripción | Parámetros | | Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- | | ---------------- | ---------------------------------------- | -------------------------- |
| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item | | click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |
### Atributos SubMenu ### Atributos SubMenu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | -------- | ------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string | — | — | | index | identificador único | string | — | — |
### Atributos Menu-Item ### Atributos Menu-Item
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | -------- | ------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string | — | — | | index | identificador único | string | — | — |
| route | Object Vue Router | object | — | — | | route | Objeto Vue Router | object | — | — |
### Atributos Menu-Group ### Atributos Menu-Group
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | -------- | ---------------- | ------ | ----------------- | ----------- |
| title | título del grupo | string | — | — | | title | título del grupo | string | — | — |

78
examples/docs/es/message-box.md
View File

@ -12,7 +12,7 @@
} }
}); });
}, },
open2() { open2() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
@ -34,7 +34,7 @@
}, 200); }, 200);
}); });
}, },
open3() { open3() {
this.$prompt('Please input your email', 'Tips', { this.$prompt('Please input your email', 'Tips', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
@ -57,7 +57,7 @@
}, 200); }, 200);
}); });
}, },
open4() { open4() {
const h = this.$createElement; const h = this.$createElement;
this.$msgbox({ this.$msgbox({
@ -92,13 +92,13 @@
}, 200); }, 200);
}); });
}, },
open5() { open5() {
this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', { this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
dangerouslyUseHTMLString: true dangerouslyUseHTMLString: true
}); });
}, },
open6() { open6() {
this.$confirm('This will permanently delete the file. Continue?', 'Warning', { this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
confirmButtonText: 'OK', confirmButtonText: 'OK',
@ -132,7 +132,7 @@ Por diseño los message box nos proveen de simulaciones de sistemas como los com
Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta. Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta.
:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesaimiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks. :::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks.
```html ```html
<template> <template>
@ -164,7 +164,7 @@ Alert interrumpe las operaciones realizadas hasta que el usuario confirme la ale
Confirm es utilizado para preguntar al usuario y recibir una confirmacion. Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
:::demo llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`.Tambien podemos perzonalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto . El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. :::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso.
```html ```html
<template> <template>
@ -202,7 +202,7 @@ Confirm es utilizado para preguntar al usuario y recibir una confirmacion.
Prompt es utilizado cuando se requiere entrada de informacion del usuario. Prompt es utilizado cuando se requiere entrada de informacion del usuario.
:::demo LLamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`.Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`. :::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`.
```html ```html
<template> <template>
@ -240,7 +240,7 @@ Prompt es utilizado cuando se requiere entrada de informacion del usuario.
Puede ser personalizado para mostrar diversos contenidos. Puede ser personalizado para mostrar diversos contenidos.
:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podras encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`.Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite maniluplar la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puedes invocar el metodo `done` para cerrar la instancia del componente MessageBox (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse). :::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse).
```html ```html
<template> <template>
@ -291,7 +291,7 @@ Puede ser personalizado para mostrar diversos contenidos.
### Utiliza cadenas HTML ### Utiliza cadenas HTML
`message` soporta cadenas HTML. `message` soporta cadenas HTML.
:::demo Establece el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML. :::demo Establezca el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML.
```html ```html
<template> <template>
@ -312,7 +312,7 @@ Puede ser personalizado para mostrar diversos contenidos.
``` ```
::: :::
:::advertencia :::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 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.
::: :::
@ -373,31 +373,31 @@ Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.conf
### Opciones ### Opciones
| Atributo | Descripción | Tipo | Valores Permitidos | Default | | Atributo | Descripción | Tipo | Valores Permitidos | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ------------------------ | ---------------------------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------- |
| title | titulo del componente MessageBox | string | — | — | | title | titulo del componente MessageBox | string | — | — |
| message | contenido del componente MessageBox | string | — | — | | message | contenido del componente MessageBox | string | — | — |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false | | dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false |
| type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — | | type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — |
| customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — | | customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — |
| callback | MessageBox callback al cerrar si no deseas utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — | | callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — |
| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — | | beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
| lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true | | lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true |
| showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) | | showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) |
| showConfirmButton |utlizado para mostrar un boton confirmar | boolean | — | true | | showConfirmButton | utlizado para mostrar un boton confirmar | boolean | — | true |
| cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel | | cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel |
| confirmButtonText | contenido de texto del boton confirmar | string | — | OK | | confirmButtonText | contenido de texto del boton confirmar | string | — | OK |
| cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — | | cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — |
| confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — | | confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — |
| closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) | | closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) |
| closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) | | closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) |
| closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true | | closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true |
| showInput | utilizado para mostrar el componente input| boolean | — | false (true cuando es llamado con prompt) | | showInput | utilizado para mostrar el componente input | boolean | — | false (true cuando es llamado con prompt) |
| inputPlaceholder | placeholder para el componente input | string | — | — | | inputPlaceholder | placeholder para el componente input | string | — | — |
| inputType | tipo del componente input | string | — | text | | inputType | tipo del componente input | string | — | text |
| inputValue | valor inicial del componente input | string | — | — | | inputValue | valor inicial del componente input | string | — | — |
| inputPattern | regexp del componente input | regexp | — | — | | inputPattern | regexp del componente input | regexp | — | — |
| inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — | | inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — |
| inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input | | inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input |
| center | utilizado para alinear el contenido al centro | boolean | — | false | | center | utilizado para alinear el contenido al centro | boolean | — | false |
| roundButton | utilizado para redondear el boton | boolean | — | false | | roundButton | utilizado para redondear el boton | boolean | — | false |

62
examples/docs/es/message.md
View File

@ -4,7 +4,7 @@
open() { open() {
this.$message('This is a message.'); this.$message('This is a message.');
}, },
openVn() { openVn() {
const h = this.$createElement; const h = this.$createElement;
this.$message({ this.$message({
@ -14,32 +14,32 @@
]) ])
}); });
}, },
open2() { open2() {
this.$message({ this.$message({
message: 'Congrats, this is a success message.', message: 'Congrats, this is a success message.',
type: 'success' type: 'success'
}); });
}, },
open3() { open3() {
this.$message({ this.$message({
message: 'Warning, this is a warning message.', message: 'Warning, this is a warning message.',
type: 'warning' type: 'warning'
}); });
}, },
open4() { open4() {
this.$message.error('Oops, this is a error message.'); this.$message.error('Oops, this is a error message.');
}, },
open5() { open5() {
this.$message({ this.$message({
showClose: true, showClose: true,
message: 'This is a message.' message: 'This is a message.'
}); });
}, },
open6() { open6() {
this.$message({ this.$message({
showClose: true, showClose: true,
@ -47,7 +47,7 @@
type: 'success' type: 'success'
}); });
}, },
open7() { open7() {
this.$message({ this.$message({
showClose: true, showClose: true,
@ -55,7 +55,7 @@
type: 'warning' type: 'warning'
}); });
}, },
open8() { open8() {
this.$message({ this.$message({
showClose: true, showClose: true,
@ -63,14 +63,14 @@
type: 'error' type: 'error'
}); });
}, },
openCenter() { openCenter() {
this.$message({ this.$message({
message: 'Centered text', message: 'Centered text',
center: true center: true
}); });
}, },
openHTML() { openHTML() {
this.$message({ this.$message({
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
@ -89,7 +89,7 @@ Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia
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 despues 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 a 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 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.
```html ```html
<template> <template>
@ -123,7 +123,7 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities. Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
:::demo Cuando necesitas mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, Estableciendo el valor de `type` puedes definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, tenemos registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`. :::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`.
```html ```html
<template> <template>
<el-button :plain="true" @click="open2">success</el-button> <el-button :plain="true" @click="open2">success</el-button>
@ -263,13 +263,13 @@ Utiliza el atributo `center` para centrar el texto.
``` ```
::: :::
:::advertencia :::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 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.
::: :::
### Metodos Globales ### Metodos Globales
Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puedes 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.
### Importación local ### Importación local
@ -279,24 +279,24 @@ Import `Message`:
import { Message } from 'element-ui'; import { Message } from 'element-ui';
``` ```
En este caso deberias llamar al metodo `Message(options)`. Tambien hemos registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`.
Puedes llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias. Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
### Options ### Options
| Atributo | Descripcion | Tipo | Valores permitidos | Default | | Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- |
| message | texto del mensaje | string / VNode | — | — | | message | texto del mensaje | string / VNode | — | — |
| type | tipo del mensaje | string | success/warning/info/error | info | | type | tipo del mensaje | string | success/warning/info/error | info |
| 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 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 | | showClose | utilizado para mostrar un boton 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 | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — |
### Metodos ### Metodos
`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puedes llamas al metodo `close`. `Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`.
| Metodo | Descripcion | | Metodo | Descripcion |
| ---- | ---- | | ------ | ---------------------------- |
| close | cierra el componente Message | | close | cierra el componente Message |

6
examples/docs/es/notification.md
View File

@ -161,7 +161,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
Proporcionamos cuatro tipos: success, warning, info y error. Proporcionamos cuatro tipos: success, warning, info y error.
::: demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`. ::: demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
```html ```html
<template> <template>
@ -423,9 +423,9 @@ En este caso, debe llamar a `Notification(options)`. También se han registrado
| 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 ### Metodos
`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it. `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 notificación actual. Para cerrar manualmente la instancia, puede llamar al métodol `close`. `Notification` y `this.$notify` devuelven la instancia de notificación actual. Para cerrar manualmente la instancia, puede llamar al método `close`.
| Metodo | Descripción | | Metodo | Descripción |
| ------ | ---------------------- | | ------ | ---------------------- |

54
examples/docs/es/pagination.md
View File

@ -10,7 +10,7 @@
display: inline-block; display: inline-block;
width: 50%; width: 50%;
box-sizing: border-box; box-sizing: border-box;
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
@ -49,11 +49,11 @@
</style> </style>
## Paginación ## Paginación
Si tiene que mostrar muchos datos en una página, utiliza la paginación. Si tiene que mostrar muchos datos en una página, utilice la paginación.
### Uso básico ### Uso básico
:::**Demo** Asigna en el atributo `layout` los diferentes elementos que quieres utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamanho de la página ) y `->`(todo elemento situado luego de este símbolo será halado a la derecha). :::**Demo** Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">When you have few pages</span> <span class="demonstration">When you have few pages</span>
@ -72,11 +72,11 @@ Si tiene que mostrar muchos datos en una página, utiliza la paginación.
``` ```
::: :::
### Paginación pequenha ### Paginación pequeña
Usa una paginación pequenha en caso de espacio limitado. Usa una paginación pequeña en caso de espacio limitado.
:::**Demo** Solo pon el atributo `small` como `true` y la Paginación se volverá pequenha. :::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
```html ```html
<el-pagination <el-pagination
small small
@ -88,9 +88,9 @@ Usa una paginación pequenha en caso de espacio limitado.
### Más elementos ### Más elementos
Agrega más modulos basados en tu escenario. Agrega más modulos basados en su escenario.
:::**Demo** Este ejemplo es un completo caso de uso. Este utiliza los eventos `size-change` y `current-change` para manejar el tamanho de página y el cambio de página. El atributo `page-sizes` acepta un arrelgo 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.
```html ```html
<template> <template>
@ -195,26 +195,26 @@ Agrega más modulos basados en tu escenario.
</script> </script>
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| | ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- |
| small | usar paginación pequenha | boolean | — | false | | small | usar paginación pequeña | boolean | — | false |
| page-size | cantidad de elementos por página | number | — | 10 | | page-size | cantidad de elementos por página | number | — | 10 |
| total | total de elementos | number | — | — | | total | total de elementos | number | — | — |
| page-count | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number | — | — | | page-count | total de páginas. Asigna `total` o `page-count` y las páginas serán mostradas; si necesitas `page-sizes`, `total` es **requerido** | number | — | — |
| current-page | número actual de la página, soporta el modificador .sync | number | — | 1 | | current-page | número actual de la página, soporta el modificador .sync | number | — | 1 |
| layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' | | layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | opciones para la cantidad de elementos por página | number[] | — | [10, 20, 30, 40, 50, 100] | | page-sizes | opciones para la cantidad de elementos por página | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — | | popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — |
| prev-text | texto para el botón `prev` | string | — | — | | prev-text | texto para el botón `prev` | string | — | — |
| next-text | texto para el botón `next` | string | — | — | | next-text | texto para el botón `next` | string | — | — |
### Eventos ### Eventos
| Nombre del evento | Descripción | Parámetros | | Nombre del evento | Descripción | Parámetros |
|---------|--------|---------| | ----------------- | --------------------------------------- | ----------------------------- |
| 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` |
### Slot ### Slot
| Nombre | Descripción | | Nombre | Descripción |
| --- | --- | | ------ | ---------------------------------------- |
| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` | | — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |

46
examples/docs/es/popover.md
View File

@ -103,7 +103,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** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternatica puedes especificar la referencia utilizando un `[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots). :::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
```html ```html
<el-popover <el-popover
@ -218,30 +218,30 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| | -------------- | ---------------------------------------- | -------------- | ---------------------------------------- | ---------------------------------------- |
| trigger | cómo se dispara el popover | string | click/focus/hover/manual | click | | trigger | cómo se dispara el popover | string | click/focus/hover/manual | click |
| title | título del popover | string | — | — | | title | título del popover | string | — | — |
| content | contenido del popover, puede ser sustituido por un `slot` | string | — | — | | content | contenido del popover, puede ser sustituido por un `slot` | string | — | — |
| width | ancho del popover | string, number | — | Min width 150px | | width | ancho del popover | string, number | — | Min width 150px |
| placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | | placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| 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 | popover transition animation | string | — | el-fade-in-linear |
| visible-arrow | si una flecha del tooltip is 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 | — | — |
### Slot ### Slot
| Nombre | Descripción | | Nombre | Descripción |
| --- | --- | | --------- | ------------------------------------ |
| — | texto contenido en popover | | — | texto contenido en popover |
| reference | elemento HTML que dispara el popover | | reference | elemento HTML que dispara el popover |
### Eventos ### Eventos
| 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 | — |
| hide | se dispara cuando se oculta el popover | — | | hide | se dispara cuando se oculta el popover | — |

24
examples/docs/es/progress.md
View File

@ -37,23 +37,23 @@ En este caso el porcentage no toma espacio adicional.
### Barra de progreso circular ### Barra de progreso circular
:::**Demo** Puedes asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamanho del círculo. :::**Demo** Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
```html ```html
<el-progress type="circle" :percentage="0"></el-progress> <el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress> <el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress> <el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress> <el-progress type="circle" :percentage="50" status="exception"></el-progress>
``` ```
::: :::
### Attributes ### Atributos
| Atributo | Descripción | Tipo | Valores aceptado | Valores por defecto | | Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
| --- | ---- | ---- | ---- | ---- | | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
| **percentage** | porcenteage, **requerido** | number | 0-100 | 0 | | percentage | porcentaje, requerido | number | 0-100 | 0 |
| type | tipo de barra de progreso | string | line/circle | line | | type | tipo de barra de progreso | string | line/circle | line |
| stroke-width | ancho de la barra de progreso | number | — | 6 | | stroke-width | ancho de la barra de progreso | number | — | 6 |
| text-inside | mostrar el porcentage dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false | | text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false |
| status | estado actual de la barra de progreso | string | success/exception | — | | status | estado actual de la barra de progreso | string | success/exception | — |
| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 | | width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 |
| show-text | mostrar porcentage | boolean | — | true | | show-text | mostrar porcentaje | boolean | — | true |

22
examples/docs/es/quickstart.md
View File

@ -4,9 +4,9 @@ Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
### Usa la plantilla de Kit de inicio ### Usa la plantilla de Kit de inicio
Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter) para ti. Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también. Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter). Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
Si prefieres no utilizarlas, lee las siguientes secciones de este documento. Si prefiere no utilizarlas, lee las siguientes secciones de este documento.
### Usando vue-cli ### Usando vue-cli
@ -21,7 +21,7 @@ Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cl
### Importando Element ### Importando Element
Puedes importar Element completamente o solamente importar lo que necesites. Comencemos importando todo. Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo.
#### Importando todo #### Importando todo
@ -43,15 +43,15 @@ El código anterior importa Element completamente. Nótese que el archivo CSS ne
#### En demanda #### En demanda
Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequenho que de la otra manera. Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera.
Primero, instala babel-plugin-component: Primero, instale babel-plugin-component:
```bash ```bash
npm install babel-plugin-component -D npm install babel-plugin-component -D
``` ```
Luego edita .babelrc: Luego edite .babelrc:
```json ```json
{ {
"presets": [ "presets": [
@ -66,7 +66,7 @@ Luego edita .babelrc:
} }
``` ```
Luego, si necesitas Button y Select, edita main.js: Luego, si necesita Button y Select, edite main.js:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
@ -234,7 +234,7 @@ Vue.prototype.$message = Message
``` ```
### Configuración global ### Configuración global
Cuando importas Element, puedes definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamanho por defecto de todos los componentes: Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamaño por defecto de todos los componentes:
Importando Element completamente： Importando Element completamente：
```JS ```JS
@ -251,10 +251,10 @@ import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button) Vue.use(Button)
``` ```
Con la anterior configuración, el tamanho por defecto de todos los componentes que tienen el atributo `size` será `small`. Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`.
### Empieza ya! ### Empiece ya!
Ahora haz incorporado Vue y Element a tu proyecto es tiempo para comenzar a programar. Inicia el modo de desarrollo: Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:
```bash ```bash
# visit localhost:8086 # visit localhost:8086

58
examples/docs/es/radio.md
View File

@ -24,7 +24,7 @@ Selección única entre múltiples opciones.
### Uso básico ### Uso básico
El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select. El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
:::**Demo** Crear un elemento Radio es fácil, solo necesitas enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`. :::Demo Crear un elemento Radio es fácil, solo necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
```html ```html
<template> <template>
<el-radio v-model="radio" label="1">Option A</el-radio> <el-radio v-model="radio" label="1">Option A</el-radio>
@ -47,7 +47,7 @@ El elemento Radio no debe tener muchas opciones. De otra manera, utilice el comp
El atributo `disabled` es utilizado para deshabilitar un Radio. El atributo `disabled` es utilizado para deshabilitar un Radio.
:::**Demo** Solo necesitas agregar el atributo `disabled`. :::demo Solo necesita agregar el atributo `disabled`.
```html ```html
<template> <template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio> <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
@ -70,7 +70,7 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
Recomendado para seleccionar opciones que se excluyen mutuamente. Recomendado para seleccionar opciones que se excluyen mutuamente.
:::**Demo** Combina `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlaza la variable con `v-model` del elemento `el-radio-group` y asigna el valor del `label` en `el-radio`. También provee el evento `change` con el valor actual como parámetro. :::demo Combine `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlace la variable con `v-model` del elemento `el-radio-group` y asigne el valor del `label` en `el-radio`. Se provee el evento `change` con el valor actual como parámetro.
```html ```html
<el-radio-group v-model="radio2"> <el-radio-group v-model="radio2">
@ -95,7 +95,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
Radio con estilo de botón. Radio con estilo de botón.
:::**Demo** Solo necesitas cambiar el elemento `el-radio` a `el-radio-button`. También proveemos el atributo `size`. :::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`.
```html ```html
<template> <template>
<div> <div>
@ -149,7 +149,7 @@ Radio con estilo de botón.
### Con bordes ### Con bordes
:::**Demo** El atributo `border` agrega un borde al elemento Radios. :::demo El atributo `border` agrega un borde al elemento Radio.
```html ```html
<template> <template>
<div> <div>
@ -191,41 +191,41 @@ Radio con estilo de botón.
### Atributos de Radio ### Atributos de Radio
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto | Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
---- | ---- | ---- | ---- | ---- | -------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- |
label | el valor del Radio | string / number / boolean | — | — | label | el valor del Radio | string / number / boolean | — | — |
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 | tamanho 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
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto | Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
---- | ---- | ---- | ---- | ---- | -------- | ------------------------------ | --------------- | ---------------- | ----------- |
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
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto | Atributo | Descripción | Tipo | Valores Aceptado | Valores por defecto |
---- | ---- | ---- | ---- | ---- | ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- |
size | tamanho 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á desahabilitada | 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 |
### Eventos de Radio ### Eventos de Radio
| Nombre de evento| Descripción| Parámetros | | Nombre de evento | Descripción | Parámetros |
| --- | --- | --- | | ---------------- | --------------------------------- | ---------------------------------------- |
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado | | change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
### Eventos de Radio-group ### Eventos de Radio-group
| Nombre de evento| Descripción| Parámetros | | Nombre de evento | Descripción | Parámetros |
| --- | --- | --- | | ---------------- | --------------------------------- | ---------------------------------------- |
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado | | change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |

56
examples/docs/es/rate.md
View File

@ -45,7 +45,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`. :::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`.
``` html ``` html
@ -78,7 +78,7 @@ Usado para la calificación
Usa texto para indicar la puntuación Usa texto para indicar la puntuación
:::**Demo** Agrega el atributo `show-text` para mostrar texto a la derecha del componente. Puedes asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`. :::demo Agregar el atributo `show-text` para mostrar texto a la derecha del componente. Puede asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
``` html ``` html
<el-rate <el-rate
@ -101,9 +101,9 @@ Usa texto para indicar la puntuación
### Más iconos ### Más iconos
Puedes utilizar iconos para diferenciar cada componente. Puede utilizar iconos para diferenciar cada componente.
:::**Demo** Puedes customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado. :::demo Puede customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
``` html ``` html
<el-rate <el-rate
@ -127,9 +127,9 @@ Puedes utilizar iconos para diferenciar cada componente.
### Solo lectura ### Solo lectura
La calificación de solo lectura is para mostrar la puntuación. Soporta media estrella. La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella.
:::**Demo** Usa el atributo `disabled` para hacer el componente de solo lectura. Agrega `show-score` para mostrar la puntuación en el lado derecho. Además, puedes usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación. :::demo Use el atributo `disabled` para hacer el componente de solo lectura. Agregar `show-score` para mostrar la puntuación en el lado derecho. Además, puede usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
``` html ``` html
<el-rate <el-rate
@ -153,26 +153,26 @@ La calificación de solo lectura is para mostrar la puntuación. Soporta media e
::: :::
### Atributos ### Atributos
| Atributo | Descripción| Tipo| Valores aceptado| Valores por defecto| | Atributo | Descripción | Tipo | Valores aceptado | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- |
| max | puntuación máxima | number | — | 5 | | max | puntuación máxima | number | — | 5 |
| disabled | si la calificación es de solo lectura | boolean | — | false | | disabled | si la calificación es de solo lectura | boolean | — | false |
| 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 | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | | colors | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#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 | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | | icon-classes | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off | | void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off |
| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on | | disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on |
| show-text | muestra el texto | boolean | — | false | | show-text | muestra el texto | boolean | — | false |
| show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false | | show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false |
| text-color | color del texto | string | — | #1F2D3D | | text-color | color del texto | string | — | #1F2D3D |
| texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] | | texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| score-template | plantilla de puntuación | string | — | {value} | | score-template | plantilla de puntuación | string | — | {value} |
### Events ### Eventos
| Nombre del evento | Descripción | Parámetros | | Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- | | ----------------- | ---------------------------------------- | ---------------------- |
| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio | | change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |

2
examples/docs/es/select.md
View File

@ -690,7 +690,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false | | reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false |
| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false | | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
### Select Eventos ### 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 |

4
examples/docs/es/slider.md
View File

@ -108,9 +108,7 @@ El valor actual se muestra cuando se inicia el arrastre del slider.
Las opciones pueden ser discretas. Las opciones pueden ser discretas.
:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute. :::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
```html ```html
<template> <template>

44
examples/docs/es/switch.md
View File

@ -28,7 +28,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
### Uso básico ### Uso básico
:::demo Enlaza `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado. :::demo Enlace `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
```html ```html
<el-switch v-model="value1"> <el-switch v-model="value1">
@ -53,7 +53,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
::: :::
### Texto de descripción ### Texto de descripción
:::demo Puedes agregar los atributos `active-text` y `inactive-text` para mostrar los textos. :::demo Puede agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
```html ```html
<el-switch <el-switch
@ -85,7 +85,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
### Tipos de valores extendidos ### Tipos de valores extendidos
:::demo Puedes establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`. :::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
```html ```html
<el-tooltip :content="'Switch value: ' + value5" placement="top"> <el-tooltip :content="'Switch value: ' + value5" placement="top">
@ -140,28 +140,28 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos.
### Atributos ### Atributos
Atributo | Descripción | Tipo | Valores aceptados | Por defecto | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
----| ----| ----| ----|---- | ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- |
disabled | whether Switch is disabled | 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`, sobreescribe `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`, sobreescribe `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 |
inactive-value | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false | inactive-value | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false |
active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF | active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF |
inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA | inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA |
name| nombre de entrada del componente Switch | string | — | — | name | nombre de entrada del componente Switch | string | — | — |
### Eventos ### Eventos
Nombre del evento | Descripción | Parametro | Nombre del evento | Descripción | Parametro |
---- | ----| ---- | ----------------- | --------------------------------- | --------- |
change | se dispara cuando el valor cambia | valor | change | se dispara cuando el valor cambia | valor |
después de cambiar después de cambiar
### Metodos ### Metodos
Metodo | Descripción | Parametro | Metodo | Descripción | Parametro |
------|--------|------- | ------ | ------------------------- | --------- |
focus | foco al componente Switch | — | focus | foco al componente Switch | — |

262
examples/docs/es/table.md
View File

@ -189,7 +189,7 @@
multipleSelection: [] multipleSelection: []
}; };
}, },
methods: { methods: {
getSummaries(param) { getSummaries(param) {
const { columns, data } = param; const { columns, data } = param;
@ -213,7 +213,7 @@
sums[index] = 'N/A'; sums[index] = 'N/A';
} }
}); });
return sums; return sums;
}, },
setCurrent(row) { setCurrent(row) {
@ -228,34 +228,34 @@
this.$refs.multipleTable.clearSelection(); this.$refs.multipleTable.clearSelection();
} }
}, },
handleClick() { handleClick() {
console.log('click'); console.log('click');
}, },
handleEdit(index, row) { handleEdit(index, row) {
console.log(index, row); console.log(index, row);
}, },
handleDelete(index, row) { handleDelete(index, row) {
console.log(index, row); console.log(index, row);
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val; this.multipleSelection = val;
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.currentRow = val; this.currentRow = val;
}, },
formatter(row, column) { formatter(row, column) {
return row.address; return row.address;
}, },
filterTag(value, row) { filterTag(value, row) {
return row.tag === value; return row.tag === value;
}, },
tableRowClassName({row, rowIndex}) { tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) { if (rowIndex === 1) {
return 'warning-row'; return 'warning-row';
@ -264,11 +264,11 @@
} }
return ''; return '';
}, },
deleteRow(index, rows) { deleteRow(index, rows) {
rows.splice(index, 1); rows.splice(index, 1);
}, },
arraySpanMethod({ row, column, rowIndex, columnIndex }) { arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
if (columnIndex === 0) { if (columnIndex === 0) {
@ -278,7 +278,7 @@
} }
} }
}, },
objectSpanMethod({ row, column, rowIndex, columnIndex }) { objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { if (columnIndex === 0) {
if (rowIndex % 2 === 0) { if (rowIndex % 2 === 0) {
@ -294,12 +294,12 @@
} }
} }
}, },
indexMethod(index) { indexMethod(index) {
return index * 2; return index * 2;
} }
}, },
watch: { watch: {
multipleSelection(val) { multipleSelection(val) {
console.log('selection: ', val); console.log('selection: ', val);
@ -336,13 +336,13 @@
## Tablas ## Tablas
Visualiza múltiples datos con un formato en particular. Podrás ordenar, filtrar y comparar datos en una tabla. Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla.
### Tabla básica ### Tabla básica
La tabla básica es solo para mostrar datos. La tabla básica es solo para mostrar datos.
:::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puedes usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establece el atributo `label` para definir el nombre de la columna. También puedes usar el atributo `width` para establecer el ancho de las columnas. :::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puede usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establecer el atributo `label` para definir el nombre de la columna. También puede usar el atributo `width` para establecer el ancho de las columnas.
```html ```html
<template> <template>
@ -394,11 +394,11 @@ La tabla básica es solo para mostrar datos.
``` ```
::: :::
### Tabla con rayas ### Tabla con franjas
La tabla con rayas hace más fácil distinguir filas diferentes. La tabla con franjas hace más fácil distinguir filas diferentes.
:::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será rayada. :::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será con franjas.
```html ```html
<template> <template>
<el-table <el-table
@ -452,7 +452,7 @@ La tabla con rayas hace más fácil distinguir filas diferentes.
### Tabla con bordes ### Tabla con bordes
:::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesitas, puedes establecer el atributo `border` a `true`. :::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo `border` a `true`.
```html ```html
<template> <template>
@ -507,9 +507,9 @@ La tabla con rayas hace más fácil distinguir filas diferentes.
### Tabla con estados ### Tabla con estados
Tu puedes destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados. Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados.
:::demo Utiliza `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrás darle diseño con estas clases. :::demo Utilice `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases.
```html ```html
<template> <template>
<el-table <el-table
@ -583,9 +583,9 @@ Tu puedes destacar el contenido de la tabla para distinguir entre "success, info
### Tabla con cabecera fija ### Tabla con cabecera fija
Cuando esta tiene demasiadas filas, puedes utilizar una cabecera fija. Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija.
:::demo Al configurar el atributo `height` de `el-table`, puedes fijar la cabecera de la tabla sin agregar otro código. :::demo Al configurar el atributo `height` de `el-table`, puede fijar la cabecera de la tabla sin agregar otro código.
```html ```html
<template> <template>
<el-table <el-table
@ -651,7 +651,7 @@ Cuando esta tiene demasiadas filas, puedes utilizar una cabecera fija.
### Tabla con columnas fijas ### Tabla con columnas fijas
Cuando se tienen demasiadas columnas, puedes fijar alguna de estas. Cuando se tienen demasiadas columnas, puede fijar alguna de estas.
:::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna. :::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna.
```html ```html
@ -753,9 +753,9 @@ Cuando se tienen demasiadas columnas, puedes fijar alguna de estas.
### Tabla con columnas y cabecera fija. ### Tabla con columnas y cabecera fija.
Cuando tienes grandes cantidades de datos para colocar en una tabla, tu puedes fijar la cabecera y columnas al mismo tiempo. Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo.
:::demo Fije las columnas y cabecera al mismo tiempo combinando los dos ejemeplo anteriores. :::demo Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores.
```html ```html
<template> <template>
<el-table <el-table
@ -857,9 +857,9 @@ Cuando tienes grandes cantidades de datos para colocar en una tabla, tu puedes f
``` ```
::: :::
### Altura de tabla con cabecera fija (y columnas ### Altura fluido de tabla con cabecera fija (y columnas)
Cuando los datos se modifican dinámicamente, es posible que necesites que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario. Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario.
:::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima. :::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima.
```html ```html
@ -1093,7 +1093,7 @@ Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agru
La selección de una fila esta soportada. La selección de una fila esta soportada.
:::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesitas mostrar el índice de la fila, puedes agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrás ver el índice iniciando desde 1. :::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesita mostrar el índice de la fila, puede agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrá ver el índice iniciando desde 1.
```html ```html
<template> <template>
<el-table <el-table
@ -1167,9 +1167,9 @@ La selección de una fila esta soportada.
### Selección multiple ### Selección multiple
También puedes seleccionar múltiples filas. También puede seleccionar múltiples filas.
:::demo Activar la selección múltiple es sencillo: Solo debes agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que buscas es mantenerte en una línea, utiliza el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda. :::demo Activar la selección múltiple es sencillo: Solo debe agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda.
```html ```html
<template> <template>
<el-table <el-table
@ -1263,7 +1263,7 @@ También puedes seleccionar múltiples filas.
Ordena los datos para encontrar o comparar información rápidamente. Ordena los datos para encontrar o comparar información rápidamente.
:::demo Establece el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establece el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar tus propias reglas de ordenamiento, utiliza `sort-method` o `sort-by`. Si lo que necesitas es ordenar de forma remota desde backend, establece `sortable` a `custom`, y escucha el evento `sort-change` de la tabla. Al dispararse el evento, tendrás acceso a la columna ordenada y orden para que puedas obtener los datos de la tabla ordenada desde tu API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puedes disparar este de acuerdo a tus propias necesidades. :::demo Establezca el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establezca el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice `sort-method` o `sort-by`. Si lo que necesita es ordenar de forma remota desde backend, establezca `sortable` a `custom`, y escuche el evento `sort-change` de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puede disparar este de acuerdo a sus propias necesidades.
```html ```html
<template> <template>
<el-table <el-table
@ -1324,9 +1324,9 @@ Ordena los datos para encontrar o comparar información rápidamente.
### Filtros ### Filtros
Filtra la tabla para encontrar la información que necesitas. Filtra la tabla para encontrar la información que necesita.
:::demo Establece el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene dos parámetros: `value` y `row`. :::demo Establezca el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene dos parámetros: `value` y `row`.
```html ```html
<template> <template>
<el-table <el-table
@ -1406,9 +1406,9 @@ Filtra la tabla para encontrar la información que necesitas.
### Plantilla de columna personalizada ### Plantilla de columna personalizada
Personaliza la columna de la tabla para que pueda integrarse con otros componentes. Personalice la columna de la tabla para que pueda integrarse con otros componentes.
:::demo Tienes acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado). :::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado).
```html ```html
<template> <template>
<el-table <el-table
@ -1488,9 +1488,9 @@ Personaliza la columna de la tabla para que pueda integrarse con otros component
### Fila expandible ### Fila expandible
Cuando el contenido de la fila es demasiado largo y buscas no mostrar la barra de desplazamiento horizontal, puedes utilizar la caracteristica de fila expandible. Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible.
:::demo Puedes activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puedes acceder a algunos atributos cuando estás usando `Scoped Slots` en plantillas de columna personalizadas. :::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas.
```html ```html
<template> <template>
<el-table <el-table
@ -1578,9 +1578,9 @@ Cuando el contenido de la fila es demasiado largo y buscas no mostrar la barra d
### Fila de resumen ### Fila de resumen
Para una tabla de números, tu puedes agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna. Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna.
:::demo Puedes agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puedes configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puedes definir tu propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada. :::demo Puede agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada.
```html ```html
<template> <template>
<el-table <el-table
@ -1716,9 +1716,9 @@ Para una tabla de números, tu puedes agregar una fila extra en el pie de págin
### Fusión de filas y columnas ### Fusión de filas y columnas
El configurar _rowspan_ y _colspan_ te permite fusionar celdas. Configurar _rowspan_ y _colspan_ le permite fusionar celdas.
:::demo Utiliza el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`. :::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`.
```html ```html
<template> <template>
@ -1855,9 +1855,9 @@ El configurar _rowspan_ y _colspan_ te permite fusionar celdas.
### Índice personalizado ### Índice personalizado
Puedes personalizar el índice de la fila con la propiedad `type=index` de las columnas. Puede personalizar el índice de la fila con la propiedad `type=index` de las columnas.
:::demo Para personalizar el índice de la fila, utiliza el atributo `index` en `<el-table-column>` con `type=index`. Si este es asignado a un número, todos los índices tendrá un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puedes ser mostrado como índice. :::demo Para personalizar el índice de la fila, utilice el atributo `index` en `<el-table-column>` con `type=index`. Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice.
```html ```html
<template> <template>
@ -1935,98 +1935,98 @@ Puedes personalizar el índice de la fila con la propiedad `type=index` de las c
::: :::
### Atributos de la tabla ### Atributos de la tabla
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- |
| data | Datos de la tabla | array | — | — | | data | Datos de la tabla | array | — | — |
| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos | string/number | — | — | | height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos | string/number | — | — |
| max-height | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number | — | — | | max-height | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number | — | — |
| stripe | especifica si la tabla será rayada | boolean | — | false | | stripe | especifica si la tabla será en franjas | boolean | — | false |
| border | especifica si la tabla tiene bordes verticales | boolean | — | false | | border | especifica si la tabla tiene bordes verticales | boolean | — | false |
| size | tamaño de la tabla | string | medium / small / mini | — | | size | tamaño de la tabla | string | medium / small / mini | — |
| fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true | | fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true |
| show-header | especifica si la cabecera de la tabla es visible | boolean | — | true | | show-header | especifica si la cabecera de la tabla es visible | boolean | — | true |
| highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false | | highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false |
| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — | | current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — |
| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — | | row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — |
| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — | | row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — |
| cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, rowIndex})/String | — | — | | cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, rowIndex})/String | — | — |
| cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, rowIndex})/Object | — | — | | cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, rowIndex})/Object | — | — |
| header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String | — | — | | header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String | — | — |
| header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — | | header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — |
| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, rowIndex})/String | — | — | | header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, rowIndex})/String | — | — |
| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — | | header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — |
| row-key | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String | — | — | | row-key | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String | — | — |
| empty-text | Texto mostrado cuando no existen datos. Puedes personalizar esta área con `slot="empty"` | String | — | No Data | | empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String | — | No Data |
| default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false | | default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false |
| expand-row-keys | establece las filas expandidas a través de esta propiedad, este valor es la clave de rilas expandidas, tu deberías establecer `row-key` antes de usar esta propiedad | Array | — | | | expand-row-keys | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array | — | |
| default-sort | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending | | default-sort | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending |
| tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | | dark | | tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | |
| show-summary | especifica si debe mostrar la fila de resumen | Boolean | — | false | | show-summary | especifica si debe mostrar la fila de resumen | Boolean | — | false |
| sum-text | texto a mostrar para la primer columna de la fila de resumen | String | — | Sum | | sum-text | texto a mostrar para la primer columna de la fila de resumen | String | — | Sum |
| summary-method | método personaliza para resumen | Function({ columns, data }) | — | — | | summary-method | método personalizado para resumen | Function({ columns, data }) | — | — |
| span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — | | span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — |
### Eventos de la tabla ### Eventos de la tabla
| Nombre del evento| Descripción | Parámetros | | Nombre del evento | Descripción | Parámetros |
| ---- | ---- | ---- | | ----------------- | ---------------------------------------- | --------------------------------- |
| select | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row | | select | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row |
| select-all | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection | | select-all | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection |
| selection-change | se dispara cuando selección cambia | selection | | selection-change | se dispara cuando selección cambia | selection |
| cell-mouse-enter | se dispara cuando se desplaza dentro de una celda | row, column, cell, event | | cell-mouse-enter | se dispara cuando se desplaza dentro de una celda | row, column, cell, event |
| cell-mouse-leave | se dispara cuando se desplaza fuera de una celda | row, column, cell, event | | cell-mouse-leave | se dispara cuando se desplaza fuera de una celda | row, column, cell, event |
| cell-click | se dispara cuando se hace clic en una celda | row, column, cell, event | | cell-click | se dispara cuando se hace clic en una celda | row, column, cell, event |
| cell-dblclick | se dispara cuando se hace doble clic en una celda | row, column, cell, event | | cell-dblclick | se dispara cuando se hace doble clic en una celda | row, column, cell, event |
| row-click | se dispara cuando se hace clic en una fila | row, event, column | | row-click | se dispara cuando se hace clic en una fila | row, event, column |
| row-contextmenu | se dispara cuando el usuario hace clic derecho en una fila | row, event | | row-contextmenu | se dispara cuando el usuario hace clic derecho en una fila | row, event |
| row-dblclick | se dispara cuando se hace doble clic en una fila | row, event | | row-dblclick | se dispara cuando se hace doble clic en una fila | row, event |
| header-click | se dispara cuando se hace click en una cabecera de columna | column, event | | header-click | se dispara cuando se hace click en una cabecera de columna | column, event |
| sort-change | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order } | | sort-change | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order } |
| filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters | | filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters |
| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow | | current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow |
| header-dragend | se dispara cuando se deja de arrastrar la cabecera | newWidth, oldWidth, column, event | | header-dragend | se dispara cuando se deja de arrastrar la cabecera | newWidth, oldWidth, column, event |
| expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows | | expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows |
### Métodos de la tabla ### Métodos de la tabla
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
|------|--------|-------| | ------------------ | ---------------------------------------- | ------------- |
| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección, puede ser poco útil cuando `reserve-selection` está habilitado | selection | | clearSelection | utilizado en selección múltiple de la tabla, limpiar selección, puede ser poco útil cuando `reserve-selection` está habilitado | selection |
| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puedes directamente establecer si la fila es seleccionada | row, selected | | toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected |
| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puedes directamente establecer si esta fila es expandida o colapsada | row, expanded | | toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row | | setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row |
| clearSort | limpiar ordenamiento, restaurar datos a orden original | — | | clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
| clearFilter | limpiar filtros | — | | clearFilter | limpiar filtros | — |
### Slots de la tabla ### Slots de la tabla
| Nombre | Descripción | | Nombre | Descripción |
|------|--------| | ------ | ---------------------------------------- |
| append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. | | append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. |
### Atributos para las columnas de la tabla ### Atributos para las columnas de la tabla
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- |
| type | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection/index/expand | — | | type | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection/index/expand | — |
| index | personaliza los índices para cada fila, funciona en columnas con `type=index` | string, Function(index) | - | - | | index | personalice los índices para cada fila, funciona en columnas con `type=index` | string, Function(index) | - | - |
| label | etiqueta de la columna | string | — | — | | label | etiqueta de la columna | string | — | — |
| column-key | clave de la columna. Si necesitas utilizar el evento `filter-change`, necesitas el atributo para identificar cual columna está siendo filtrada | string | string | — | — | | column-key | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string | string | — |
| prop | nombre del campo. También puedes usar su alias: `property` | string | — | — | | prop | nombre del campo. También puede usar su alias: `property` | string | — | — |
| width | ancho de la columna | string | — | — | | width | ancho de la columna | string | — | — |
| min-width | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string | — | — | | min-width | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string | — | — |
| fixed | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean | true/left/right | — | | fixed | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean | true/left/right | — |
| render-header | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index }) | — | — | | render-header | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index }) | — | — |
| sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string | true, false, custom | false | | sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string | true, false, custom | false |
| sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b) | — | — | | sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b) | — | — |
| sort-by | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | — | — | | sort-by | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | — | — |
| resizable | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean | — | false | | resizable | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean | — | false |
| formatter | función que formatea el contenido de la celda | Function(row, column, cellValue) | — | — | | formatter | función que formatea el contenido de la celda | Function(row, column, cellValue) | — | — |
| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean | — | false | | show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean | — | false |
| align | alineación | string | left/center/right | left | | align | alineación | string | left/center/right | left |
| header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String | left/center/right | — | | header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String | left/center/right | — |
| class-name | nombre de clase de la celda en la columna | string | — | — | | class-name | nombre de clase de la celda en la columna | string | — | — |
| label-class-name | nombre de clase de la etiqueta de esta columna class name of the label of this column | string | — | — | | label-class-name | nombre de clase de la etiqueta de esta columna | string | — | — |
| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — | | selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — |
| reserve-selection | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection` | boolean | — | false | | reserve-selection | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection` | boolean | — | false |
| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — | | filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — |
| filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — | | filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — |
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true | | filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row) | — | — | | filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row) | — | — |
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — | | filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |

46
examples/docs/es/tabs.md
View File

@ -92,13 +92,13 @@
## Tabulación ## Tabulación
Divide collecciones de datos que están relacionados pero pertenecen a diferentes tipos. Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos.
### Uso básico ### Uso básico
Tabulación básica y concisa Tabulación básica y concisa
:::demo de Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`. :::demo Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
```html ```html
<template> <template>
@ -211,7 +211,7 @@ Es posible usar el atributo `tab-position` para establecer la posición de la ta
### Pestaña Personalizada ### Pestaña Personalizada
Es posible usar slots nombrados para personalizar el contenido de la etiqueta de la pestaña. Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña.
:::demo :::demo
```html ```html
@ -368,27 +368,27 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
::: :::
### Atributos de Pestañas ### Atributos de Pestañas
| Atributo | Descripción | Tipo | Valores Aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- |
| type | tipo de Pestaña | string | card/border-card | — | | type | tipo de Pestaña | string | card/border-card | — |
| closable | si la Pestaña es cerrable | boolean | — | false | | closable | si la Pestaña es cerrable | boolean | — | false |
| addable | si la Pestaña es añadible | boolean | — | false | | addable | si la Pestaña es añadible | boolean | — | false |
| editable | si la Pestaña es añadible y cerrable | boolean | — | false | | editable | si la Pestaña es añadible y cerrable | boolean | — | false |
| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña | | value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña |
| tab-position | posición de tabulación | string | top/right/bottom/left | top | | tab-position | posición de tabulación | string | top/right/bottom/left | top |
### 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 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-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida |
| tab-add | se lanza cuando se hace click al botón tab-add | — | | tab-add | se lanza cuando se hace click 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 ### Attributos 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 | — | — |
| disabled | si la Tabulación está deshabilitada | boolean | — | false | | disabled | si la Tabulación está deshabilitada | boolean | — | false |
| name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' | | name | identificador correspondiente al activeName de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' |
| closable | whether Tab is closable | boolean | — | false | | closable | si el Tab es cerrable | boolean | — | false |

80
examples/docs/es/time-picker.md
View File

@ -8,13 +8,13 @@
## Selector de Tiempo ## Selector de Tiempo
Usar el Selector de Tiempo para entradas de tiempo. 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 escogan.
:::demo Usar 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
<el-time-select <el-time-select
v-model="value1" v-model="value1"
@ -171,46 +171,46 @@ Es posible escoger un rango de tiempo arbitrario.
</script> </script>
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ----------- |
| readonly | saber si el Selector de Fecha está en modo de sólo lectura | boolean | — | false | | readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
| disabled | saber si el Selector de Fecha se encuentra deshabilitado | boolean | — | false | | disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
| editable | saber si el input puede ser editado | boolean | — | true | | editable | si el input puede ser editado | boolean | — | true |
| clearable | saber si mostrar el botón de borrado | boolean | — | true | | clearable | si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | medium / small / mini | — | | size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder en un modo fuera de rango | string | — | — | | placeholder | placeholder en un modo fuera de rango | string | — | — |
| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — | | start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — | | end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
| is-range | saber si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false | | is-range | si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
| arrow-control | saber si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false | | arrow-control | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
| value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alineación | left / center / right | left | | align | alineación | left / center / right | left | |
| popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — | | popper-class | nombre de clase personalizada para el dropdown del Time Picker | string | — | — |
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} | | picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| range-separator | separador de rango | string | - | '-' | | range-separator | separador de rango | string | - | '-' |
| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — | | default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
| value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — | | value-format | opcional, solo para Time Picker, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | así como `name` en input nativo | string | — | — | | name | como `name` en input nativo | string | — | — |
### Opciones para Seleccionador de Tiempo ### Opciones para Time Picker
| Atributo | Descripción | Tipo | Valores Aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| start | tiempo de inicio | string | — | 09:00 | | start | tiempo de inicio | string | — | 09:00 |
| end | tiempo de finalización | string | — | 18:00 | | end | tiempo de finalización | string | — | 18:00 |
| step | salto de tiempo | string | — | 00:30 | | step | salto de tiempo | string | — | 00:30 |
| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 | | minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — | | maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
### Opciones para Selector de Tiempo ### Opciones para Time Picker
| Atributo | Descripción | Tipo | Valores Aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | --------------- | ---------------------------------------- | -------------- | ----------------------------------- | ----------- |
| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — | | selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
| format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
### Eventos ### Eventos
| Nombre de Evento | Descripción | Parámetros | | Nombre de Evento | Descripción | Parámetros |
|---------|--------|---------| | ---------------- | ---------------------------------------- | ----------------------------- |
| change | se lanza cuando el usuario confirma el valor | valor limitado del componente | | change | se lanza cuando el usuario confirma el valor | valor limitado del componente |
| blur | se lanza cuando el input se difumina | (event: Event) | | blur | se lanza cuando el input se difumina | (event: Event) |
| focus | se lanza cuando el input se enfoca | (event: Event) | | focus | se lanza cuando el input se enfoca | (event: Event) |

40
examples/docs/es/tooltip.md
View File

@ -57,13 +57,13 @@
## Tooltip ## Tooltip
Mostrar aviso de información para el hover del mouse. Mostrar aviso de información con el hover del mouse.
### Uso básico ### Uso básico
Tooltip tiene 9 colocaciones. Tooltip tiene 9 colocaciones.
:::demo Usar el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento. :::demo Use el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
```html ```html
<div class="box"> <div class="box">
<div class="top"> <div class="top">
@ -173,7 +173,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-escribir el atributo `content` del `el-tooltip` al añadir un slot llamado `content`. :::demo Sobre-escribiba 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>
@ -186,7 +186,7 @@ Despliegue múltiples líneas de texto y establezca su formato.
Adicional a los usos básicos, existen algunos atributos que permiten la personalización: Adicional a los usos básicos, existen algunos atributos que permiten la personalización:
el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `is el-fade-in-linear`. el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `el-fade-in-linear`.
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`. el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
@ -225,19 +225,19 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|----------------|---------|-----------|-------------|--------| | -------------- | ---------------------------------------- | ------- | ---------------------------------------- | ---------------------------------------- |
| effect | tema del Tooltip | string | dark/light | dark | | effect | tema del Tooltip | string | dark/light | dark |
| content | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string | — | — | | content | contenido a mostrar, puede ser sobre-escrito por `slot#content` | string | — | — |
| placement | posición del Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | | placement | posición del Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| value(v-model) | visibilidad del Tooltip | boolean | — | false | | value(v-model) | visibilidad del Tooltip | boolean | — | false |
| disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false | | disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
| offset | offset del Tooltip | number | — | 0 | | offset | offset del Tooltip | number | — | 0 |
| transition | nombre de animación | string | — | el-fade-in-linear | | transition | nombre de animación | string | — | el-fade-in-linear |
| visible-arrow | saber si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true | | visible-arrow | si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` | | popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | retraso de la apariencia, en milisegundos | number | — | 0 | | open-delay | retraso de la apariencia, en milisegundos | number | — | 0 |
| manual | saber si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false | | manual | si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — | | popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
| enterable | saber si el mouse puede entrar al Tooltip | Boolean | — | true | | enterable | si el mouse puede entrar al Tooltip | Boolean | — | true |
| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 | | hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |

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

@ -61,7 +61,7 @@
} }
}; };
}, },
methods: { methods: {
handleChange(value, direction, movedKeys) { handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys); console.log(value, direction, movedKeys);
@ -73,7 +73,7 @@
## 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 quieres que la lista destino esté vacía inicialmente puedes 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 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.
```html ```html
<template> <template>
<el-transfer <el-transfer
@ -108,9 +108,9 @@
### Filtrar ### Filtrar
Puedes buscar y filtrar los items. Puede buscar y filtrar los items.
::demo Pon el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda. ::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.
```html ```html
<template> <template>
<el-transfer <el-transfer
@ -151,11 +151,11 @@ Puedes buscar y filtrar los items.
``` ```
::: :::
### Customizable ### Personalizable
Puedes customizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie. 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.
:::demo Usa `titles`, `button-texts`, `render-content` y `format` respectivamente para customizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quieres algunos items marcados inicialmente pudes usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Ten en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente. :::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. 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>
<el-transfer <el-transfer
@ -217,11 +217,11 @@ Puedes customizar los títulos, botones, la función de renderizado de los items
``` ```
::: :::
### Prop aliases ### Prop con alias
Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias. Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo `props` para añadir alias.
:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`. :::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tiene que añadir alias para `key` y `label`.
```html ```html
<template> <template>
<el-transfer <el-transfer
@ -259,28 +259,28 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
::: :::
### Atributos ### Atributos
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto | | Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- |
| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] | | data | Origen de datos | array[{ key, label, disabled }] | — | [ ] |
| filterable | Si se puede filtrar | boolean | — | false | | filterable | Si se puede filtrar | boolean | — | false |
| filter-placeholder | Placeholder para el input del filtro| string | — | Enter keyword | | filter-placeholder | Placeholder para el input del filtro | string | — | Enter keyword |
| filter-method | Método de filtrado | function | — | — | | filter-method | Método de filtrado | function | — | — |
| titles | Títulos de las listas | array | — | ['List 1', 'List 2'] | | titles | Títulos de las listas | array | — | ['List 1', 'List 2'] |
| button-texts | Texto de los botones | array | — | [ ] | | button-texts | Texto de los botones | array | — | [ ] |
| render-content | Función de renderizado | function(h, option) | — | — | | render-content | Función de renderizado | function(h, option) | — | — |
| format | Texto para el status en el header| object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } | | format | Texto para el status en el header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | prop alias para el origen de datos | object{key, label, disabled} | — | — | | props | prop alias para el origen de datos | object{key, label, disabled} | — | — |
| left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] | | left-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la izquierda | array | — | [ ] |
| right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] | | right-default-checked | Array de claves de los elementos marcados inicialmente en la lista de la derecha | array | — | [ ] |
### Slot ### Slot
| Nombre | Descripcion | | Nombre | Descripcion |
|------|--------| | ------------ | ---------------------------------------- |
| left-footer | Contenido del footer de la lista de la izquierda | | left-footer | Contenido del footer de la lista de la izquierda |
| right-footer | Contenido del footer de la lista de la derecha | | right-footer | Contenido del footer de la lista de la derecha |
### 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 lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |

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

@ -1,6 +1,6 @@
## Transiciones incorporadas ## Transiciones incorporadas
Puedes usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition). Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
### Fade ### Fade

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

@ -4,16 +4,16 @@
width: 20px; width: 20px;
background: #ddd; background: #ddd;
} }
.folder { .folder {
width: 20px; width: 20px;
background: #888; background: #888;
} }
.buttons { .buttons {
margin-top: 20px; margin-top: 20px;
} }
.filter-tree { .filter-tree {
margin-top: 20px; margin-top: 20px;
} }
@ -154,7 +154,7 @@
this.$refs.tree2.filter(val); this.$refs.tree2.filter(val);
} }
}, },
methods: { methods: {
handleCheckChange(data, checked, indeterminate) { handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate); console.log(data, checked, indeterminate);
@ -175,7 +175,7 @@
} else { } else {
hasChild = Math.random() > 0.5; hasChild = Math.random() > 0.5;
} }
setTimeout(function() { setTimeout(function() {
let data; let data;
if (hasChild) { if (hasChild) {
@ -187,7 +187,7 @@
} else { } else {
data = []; data = [];
} }
resolve(data); resolve(data);
}, 500); }, 500);
}, },
@ -196,7 +196,7 @@
return resolve([{ name: 'region' }]); return resolve([{ name: 'region' }]);
} }
if (node.level > 1) return resolve([]); if (node.level > 1) return resolve([]);
setTimeout(() => { setTimeout(() => {
const data = [{ const data = [{
name: 'leaf', name: 'leaf',
@ -204,7 +204,7 @@
}, { }, {
name: 'zone' name: 'zone'
}]; }];
resolve(data); resolve(data);
}, 500); }, 500);
}, },
@ -239,14 +239,14 @@
} }
data.children.push(newChild); data.children.push(newChild);
}, },
remove(node, data) { remove(node, data) {
const parent = node.parent; const parent = node.parent;
const children = parent.data.children || parent.data; const children = parent.data.children || parent.data;
const index = children.findIndex(d => d.id === data.id); const index = children.findIndex(d => d.id === data.id);
children.splice(index, 1); children.splice(index, 1);
}, },
renderContent(h, { node, data, store }) { renderContent(h, { node, data, store }) {
return ( return (
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;"> <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
@ -259,13 +259,13 @@
</span> </span>
</span>); </span>);
}, },
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true;
return data.label.indexOf(value) !== -1; return data.label.indexOf(value) !== -1;
} }
}, },
data() { data() {
return { return {
data, data,
@ -421,7 +421,7 @@ Usado para la selección de nodos.
### Nodos hoja en modo perezoso ### Nodos hoja en modo perezoso
:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puedes decirle al árbol que el nodo es una hoja de antemano, y así evitas que muestre el botón de desplegar. :::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar.
```html ```html
<el-tree <el-tree
:props="props1" :props="props1"
@ -525,7 +525,7 @@ El checkbox de un nodo se puede poner como desactivado.
### Desplegado o seleccionado por defecto ### Desplegado o seleccionado por defecto
Los nodos pueden estar desplegados o seleccionados por defecto. Los nodos pueden estar desplegados o seleccionados por defecto.
:::demo Utiliza `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Ten en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol. :::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol.
```html ```html
<el-tree <el-tree
:data="data2" :data="data2"
@ -588,7 +588,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
### Seleccionando nodos ### Seleccionando nodos
::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo haces por claves el atributo `node-key` es necesario. ::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
```html ```html
<el-tree <el-tree
:data="data2" :data="data2"
@ -682,10 +682,10 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
``` ```
::: :::
### Contenido personalzado en los nodos ### Contenido personalizado en los nodos
El contenido de los nodos puede ser personalizado, así que puedes añadir iconos y botones a tu gusto. El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
::: demo Utiliza `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mira la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente. ::: demo Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
```html ```html
<el-tree <el-tree
:data="data4" :data="data4"
@ -782,7 +782,7 @@ El contenido de los nodos puede ser personalizado, así que puedes añadir icono
### Filtrado de nodos ### Filtrado de nodos
Los nodos del árbol se pueden filtrar. Los nodos del árbol se pueden filtrar.
:::demo Invoca el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Ten en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado. :::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado.
```html ```html
<el-input <el-input
placeholder="Filter keyword" placeholder="Filter keyword"
@ -931,54 +931,54 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
::: :::
### Atributos ### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| - | - | - | - | -| | --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |
| data | Datos del árbol | array | — | — | | data | Datos del árbol | array | — | — |
| empty-text | Texto a mostrar cuando data es void | string | — | — | | empty-text | Texto a mostrar cuando data es void | string | — | — |
| node-key | Identificador único en todo el árbol para los nodos | string | — | — | | node-key | Identificador único en todo el árbol para los nodos | string | — | — |
| props | Opciones de configuración | object | — | — | | props | Opciones de configuración | object | — | — |
| load | Método para cargar los datos de subárboles | function(node, resolve) | — | — | | load | Método para cargar los datos de subárboles | function(node, resolve) | — | — |
| render-content | Función de renderizado para los nodos | Function(h, { node, data, store }| — | — | | render-content | Función de renderizado para los nodos | Function(h, { node, data, store } | — | — |
| highlight-current | Si el nodo actual está resaltado | boolean | — | false | | highlight-current | Si el nodo actual está resaltado | boolean | — | false |
| default-expand-all | Expandir todos los nodos por defecto | boolean | — | false | | default-expand-all | Expandir todos los nodos por defecto | boolean | — | false |
| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - | | expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - |
| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true | | auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true |
| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — | | default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — |
| show-checkbox | Si un nodo es seleccionable | boolean | — | false | | show-checkbox | Si un nodo es seleccionable | boolean | — | false |
| check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false | | check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false |
| default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — | | default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — |
| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — | | filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — |
| accordion | Dice si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false | | accordion | Si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false |
| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 | | indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 |
### props ### props
| Atributo | Descripción | Tipo | Valores aceptados | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| - | -| - | - | - | | -------- | ---------------------------------------- | ----------------------------- | ----------------- | ----------- |
| label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — | | label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — |
| children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — | | children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — |
| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — | | isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — |
### Métodos ### Métodos
`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados. `Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados.
| Método | Descripción | Parámetros | | Método | Descripción | Parámetros |
| - | - | - | | ----------------- | ---------------------------------------- | ---------------------------------------- |
| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method | | filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method |
| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato | | updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato |
| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false`| | getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false` |
| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar | | setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar |
| getCheckedKeys | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. | | getCheckedKeys | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. |
| setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado| (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados | | setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados |
| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad | | setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad |
| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — | | getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — |
| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — | | getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — |
| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado| | setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado |
| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado | | setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado |
### Eventos ### Eventos
| Nombre del evento | Descripción | Parámetros | | Nombre del evento | Descripción | Parámetros |
| - | - | - | | ----------------- | ---------------------------------------- | ---------------------------------------- |
| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si | | node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si |
| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados | | check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados |
| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode | | current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si | | node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si | | node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |

74
examples/docs/es/upload.md
View File

@ -17,7 +17,7 @@
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&:hover, &:focus { &:hover, &:focus {
border-color: #409EFF; border-color: #409EFF;
} }
@ -102,7 +102,7 @@
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'; const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) { if (!isJPG) {
this.$message.error('Avatar picture must be JPG format!'); this.$message.error('Avatar picture must be JPG format!');
} }
@ -126,7 +126,7 @@ Carga archivos haciendo clic o arrastrándolos.
### Clic para cargar archivos ### Clic para cargar archivos
:::demo Personaliza el tipo y texto del botón utilizando la propiedad `slot`. Define las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifica un método para cuando el límite ha sido excedido. :::demo Personalice el tipo y texto del botón utilizando la propiedad `slot`. Defina las propiedades `limit` y `on-exceed` para limitar el número máximo de archivos a subir y especifique un método para cuando el límite ha sido excedido.
```html ```html
<el-upload <el-upload
class="upload-demo" class="upload-demo"
@ -165,7 +165,7 @@ Carga archivos haciendo clic o arrastrándolos.
### Cargar avatar de usuario ### Cargar avatar de usuario
Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamaño. Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
::: demo ::: demo
```html ```html
@ -236,7 +236,7 @@ Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamañ
### Pared de fotografías ### Pared de fotografías
Utiliza la propiedad `list-type` para cambiar el estilo a un listado de archivos. Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos.
::: demo ::: demo
```html ```html
@ -308,7 +308,7 @@ Utiliza la propiedad `list-type` para cambiar el estilo a un listado de archivos
### Control de lista de archivos ### Control de lista de archivos
Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos. Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
::: demo ::: demo
```html ```html
@ -347,7 +347,7 @@ Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
### Arrastrar para cargar archivo ### Arrastrar para cargar archivo
Puedes arrastrar el archivo dentro de un área en especifico para cargar el archivo. Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.
::: demo ::: demo
```html ```html
@ -392,35 +392,35 @@ Puedes arrastrar el archivo dentro de un área en especifico para cargar el arch
::: :::
### 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 archvios](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) | — | — |
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 | 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 | | 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) | — | - |
### Métodos ### Métodos
| Nombre del método | Descripción | Parametros | | Nombre del método | Descripción | Parametros |
|---------- |-------- |---------- | | ----------------- | ---------------------------------------- | ------------------------- |
| clearFiles | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | — | | clearFiles | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | — |
| abort | cancela la petición de carga | （ file: fileList's item ） | | abort | cancela la petición de carga | （ file: fileList's item ） |