Skip to content

E
Element
Commit 6123ee70 authored by Gonzalo Nandez's avatar Gonzalo Nandez Committed by 杨奕
Browse files
Options

Revision of documentation in Spanish

parent 91fece12
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 908 additions and 909 deletions
examples/docs/es/alert.md
View file @ 6123ee70
...@@ -49,11 +49,11 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec ...@@ -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. ...@@ -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 | — |
examples/docs/es/badge.md
View file @ 6123ee70
...@@ -43,7 +43,7 @@ Muestra la cantidad de mensajes nuevos. ...@@ -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. ...@@ -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. ...@@ -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 |
examples/docs/es/breadcrumb.md
View file @ 6123ee70
## 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 ...@@ -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 ...@@ -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 |
......
examples/docs/es/button.md
View file @ 6123ee70
...@@ -8,11 +8,11 @@ ...@@ -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 ...@@ -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 ...@@ -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 |
\ No newline at end of file \ No newline at end of file
examples/docs/es/carousel.md
View file @ 6123ee70
...@@ -61,11 +61,11 @@ ...@@ -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 ...@@ -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 ...@@ -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 | — | — |
......
examples/docs/es/cascader.md
View file @ 6123ee70
...@@ -1673,7 +1673,7 @@ Buscar y seleccionar opciones con una palabra clave. ...@@ -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 |
......
examples/docs/es/checkbox.md
View file @ 6123ee70
...@@ -197,7 +197,7 @@ Las propiedades `min` y `max` pueden limitar la cantidad de elementos selecciona ...@@ -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. ...@@ -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 |
examples/docs/es/collapse.md
View file @ 6123ee70
...@@ -30,7 +30,7 @@ Use Collapse para almacenar contenidos. ...@@ -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 ...@@ -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 ...@@ -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 | — | — |
\ No newline at end of file \ No newline at end of file
examples/docs/es/color-picker.md
View file @ 6123ee70
...@@ -46,7 +46,7 @@ ColorPicker es un selector de color que soporta varios formatos de color. ...@@ -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. ...@@ -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. ...@@ -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 |
\ No newline at end of file
examples/docs/es/color.md
View file @ 6123ee70
...@@ -6,7 +6,7 @@ ...@@ -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. ...@@ -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 ...@@ -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">
......
examples/docs/es/container.md
View file @ 6123ee70
...@@ -4,11 +4,11 @@ ...@@ -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. ...@@ -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 ú ...@@ -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 |
\ No newline at end of file \ No newline at end of file
examples/docs/es/custom-theme.md
View file @ 6123ee70
## 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'; ...@@ -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 ...@@ -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 ...@@ -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] ...@@ -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; ...@@ -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 ...@@ -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) ...@@ -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 ...@@ -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`.
\ No newline at end of file \ No newline at end of file
examples/docs/es/datetime-picker.md
View file @ 6123ee70
This diff is collapsed.
examples/docs/es/dialog.md
View file @ 6123ee70
This diff is collapsed.
examples/docs/es/dropdown.md
View file @ 6123ee70
...@@ -86,7 +86,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones ...@@ -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.
......
examples/docs/es/form.md
View file @ 6123ee70
...@@ -376,9 +376,7 @@ Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ...@@ -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">
......
examples/docs/es/icon.md
View file @ 6123ee70
...@@ -38,14 +38,14 @@ ...@@ -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;
......
examples/docs/es/input-number.md
View file @ 6123ee70
...@@ -154,28 +154,28 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s ...@@ -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 | - |
examples/docs/es/installation.md
View file @ 6123ee70
...@@ -8,7 +8,7 @@ npm i element-ui -S ...@@ -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 ...@@ -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 ...@@ -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
examples/docs/es/layout.md
View file @ 6123ee70
...@@ -37,7 +37,7 @@ Rápido y facilmente crea un layout básico con 24 columnas. ...@@ -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. ...@@ -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 ...@@ -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: ...@@ -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 |
examples/docs/es/loading.md
View file @ 6123ee70
...@@ -26,7 +26,7 @@ ...@@ -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 ...@@ -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. ...@@ -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 ...@@ -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: ...@@ -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 ...@@ -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 | — | — |
\ No newline at end of file \ No newline at end of file
examples/docs/es/menu.md
View file @ 6123ee70
...@@ -19,7 +19,7 @@ ...@@ -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. ...@@ -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. ...@@ -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. ...@@ -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 | — | — |
examples/docs/es/message-box.md
View file @ 6123ee70
This diff is collapsed.
examples/docs/es/message.md
View file @ 6123ee70
...@@ -4,7 +4,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -47,7 +47,7 @@
type: 'success' type: 'success'
}); });
}, },
open7() { open7() {
this.$message({ this.$message({
showClose: true, showClose: true,
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
type: 'warning' type: 'warning'
}); });
}, },
open8() { open8() {
this.$message({ this.$message({
showClose: true, showClose: true,
...@@ -63,14 +63,14 @@ ...@@ -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 ...@@ -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. ...@@ -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. ...@@ -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`: ...@@ -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 |
examples/docs/es/notification.md
View file @ 6123ee70
...@@ -161,7 +161,7 @@ Muestra un mensaje de notificación global en una esquina de la página. ...@@ -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 ...@@ -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 |
| ------ | ---------------------- | | ------ | ---------------------- |
......
examples/docs/es/pagination.md
View file @ 6123ee70
...@@ -10,7 +10,7 @@ ...@@ -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 @@ ...@@ -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. ...@@ -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. ...@@ -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. ...@@ -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` |
examples/docs/es/popover.md
View file @ 6123ee70
...@@ -103,7 +103,7 @@ ...@@ -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 ...@@ -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 | — |
examples/docs/es/progress.md
View file @ 6123ee70
...@@ -37,23 +37,23 @@ En este caso el porcentage no toma espacio adicional. ...@@ -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 |
examples/docs/es/quickstart.md
View file @ 6123ee70
...@@ -4,9 +4,9 @@ Esta sección te guía en el proceso de usar Element con webpack en un proyecto. ...@@ -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 ...@@ -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 ...@@ -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: ...@@ -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 ...@@ -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' ...@@ -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
......
examples/docs/es/radio.md
View file @ 6123ee70
...@@ -24,7 +24,7 @@ Selección única entre múltiples opciones. ...@@ -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 ...@@ -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. ...@@ -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. ...@@ -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. ...@@ -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. ...@@ -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 |
examples/docs/es/rate.md
View file @ 6123ee70
...@@ -45,7 +45,7 @@ Usado para la calificación ...@@ -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 ...@@ -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 ...@@ -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. ...@@ -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 ...@@ -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 |
examples/docs/es/select.md
View file @ 6123ee70
...@@ -690,7 +690,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va ...@@ -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 |
......
examples/docs/es/slider.md
View file @ 6123ee70
...@@ -108,9 +108,7 @@ El valor actual se muestra cuando se inicia el arrastre del slider. ...@@ -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>
......
examples/docs/es/switch.md
View file @ 6123ee70
...@@ -28,7 +28,7 @@ Switch es utilizdo para realizar cambios entre dos estados opuestos. ...@@ -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. ...@@ -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. ...@@ -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. ...@@ -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 | — |
examples/docs/es/table.md
View file @ 6123ee70
This diff is collapsed.
examples/docs/es/tabs.md
View file @ 6123ee70
...@@ -92,13 +92,13 @@ ...@@ -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 ...@@ -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. ...@@ -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 |
examples/docs/es/time-picker.md
View file @ 6123ee70
...@@ -8,13 +8,13 @@ ...@@ -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. ...@@ -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) |
examples/docs/es/tooltip.md
View file @ 6123ee70
...@@ -57,13 +57,13 @@ ...@@ -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`. ...@@ -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. ...@@ -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 ...@@ -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 |
examples/docs/es/transfer.md
View file @ 6123ee70
...@@ -61,7 +61,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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. ...@@ -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 ...@@ -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 ...@@ -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 |
examples/docs/es/transition.md
View file @ 6123ee70
## 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
......
examples/docs/es/tree.md
View file @ 6123ee70
This diff is collapsed.
examples/docs/es/upload.md
View file @ 6123ee70
...@@ -17,7 +17,7 @@ ...@@ -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 @@ ...@@ -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. ...@@ -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. ...@@ -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ñ ...@@ -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 ...@@ -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 ...@@ -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 ...@@ -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 ） |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment