| value / v-model | valor vinculante | Date/string/number | — | — |
| value / v-model | valor vinculante | Date/string/number | — | — |
| range | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months | Array | — | — |
| range | rango de tiempo, incluyendo el tiempo de inicio y el tiempo final. Start time debe ser el primer dia de la semana, end time debe ser el ultimo día de la semana, el time entre las fechas no puede exceder dos meses | Array | — | — |
| first-day-of-week | fisrt day of week| Number | 1 to 7 | 1 |
| first-day-of-week | primer día de la semana | Number | 1 to 7 | 1 |
### dateCell scoped slot
### dateCell scoped slot
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
@@ -1923,14 +1923,14 @@ Puede personalizar el contenido del nodo de cascada.
...
@@ -1923,14 +1923,14 @@ Puede personalizar el contenido del nodo de cascada.
| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
| show-all-levels | si muestra todos los niveles del valor seleccionado en el input | boolean | — | true |
| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
| collapse-tags | si se colapsan los tags en la selección múltiple | boolean | - | false |
| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
| separator | separador de las etiquetas de las opciones | string | — | ' / ' |
| filterable | si las opciones pueden ser usadas para la busqueda | boolean | — | — |
| filterable | si las opciones pueden ser usadas para la búsqueda | boolean | — | — |
| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
| filter-method | lógica de búsqueda personalizable. El primer parámetro es `node`, el segundo es `keyword`, y es necesario devolver un valor boolean que indique si se ha tenido éxito. | function(node, keyword) | - | - |
| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
| debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 |
| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
| before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — |
| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — |
| popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — |
### Eventos de Cascader
### Eventos de Cascader
| Nombre del evento | Descripción | Parámetros |
| Nombre | Descripción | Parámetros |
|---------- |-------- |---------- |
|---------- |-------- |---------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
...
@@ -1939,13 +1939,13 @@ Puede personalizar el contenido del nodo de cascada.
...
@@ -1939,13 +1939,13 @@ Puede personalizar el contenido del nodo de cascada.
| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
| visible-change | se activa cuando aparece/desaparece el menú desplegable | verdadero cuando aparece, y falso de otra manera |
| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
| remove-tag | se activa cuando se quita la etiqueta en modo de selección múltiple | el valor de la etiqueta que se quita |
### Cascader Methods
### Cascader Métodos
| Method Name | Description | Parameters |
| Método | Descripción | Parámetros |
| ---- | ---- | ---- |
| ---- | ---- | ---- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |
### Slots de Cascader
### Slots de Cascader
| Nombre del slot | Descripción |
| Nombre | Descripción |
|---------|-------------|
|---------|-------------|
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| empty | cuando no hay opciones coincidentes. |
| empty | cuando no hay opciones coincidentes. |
...
@@ -1958,19 +1958,19 @@ Puede personalizar el contenido del nodo de cascada.
...
@@ -1958,19 +1958,19 @@ Puede personalizar el contenido del nodo de cascada.
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
| props | opciones de configuración, consulte la siguiente tabla. | object | — | — |
### Eventos de CascaderPanel
### Eventos de CascaderPanel
| Nombre de los evetos | Descripción | Parámetros |
| Evento | Descripción | Parámetros |
|---------- |-------- |---------- |
|---------- |-------- |---------- |
| change | se desencadena cuando cambia el valor ligado. | valor |
| change | se desencadena cuando cambia el valor ligado. | valor |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
| expand-change | se desencadena cuando las opciones expandidas cambian | un array de los nodos padres del nodo en expansión |
### CascaderPanel Methods
### CascaderPanel Métodos
| Method Name | Description | Parameters |
| Método | Descripción | Parámetros |
| ---- | ---- | ---- |
| ---- | ---- | ---- |
| getCheckedNodes | get an array of currently selected node | (leafOnly) whether only return the leaf checked nodes, default is `false` |
| getCheckedNodes | Obtiene el array de los nodos seleccionados actualmente | (leafOnly) Si solo devuelve los nodos chequeados, por defecto es `false` |
| clearCheckedNodes | clear checked nodes | - |
| clearCheckedNodes | Limpia de nodos chequeados | - |
### Slots de CascaderPanel
### Slots de CascaderPanel
| Nombre del slot | Descripción |
| Nombre | Descripción |
|---------|-------------|
|---------|-------------|
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
| - | el contenido personalizado del nodo cascader, el parámetro es { node, data }, que son el actual objeto Node y los datos del nodo respectivamente. |
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 4 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 4 maneras de modificar los estilos.
### Theme Roller
### Theme Roller
Use [Online Theme Roller](./#/es/theme)to customize all Design Tokens of global variables and components,and preview the new theme in real-time.and it can generate a complete style package based on the new theme for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or part of this section).
Use [Online Theme Roller](./#/es/theme)para personalizar el diseño de las variables globales y componentes, y vea el resultado en tiempo real. Puede generar un completo paquete de estilos basado en un nuevo tema que puede bajar directamente (para importar los archivos del nuevo estilo al proyecto por favor vea la sección 'Importar un tema personalizado').
Also, use [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim),to customize theme and preview in real-time on any website developed by Element.
También puede usar [Theme Roller Chrome Extension](https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim), para personalizar un tema y ver el resultado en tiempo real en cualquier sitio desarrollado con Element.<imgsrc="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png"style="width: 100%;margin: 30px auto 0;display: block;">
<imgsrc="https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png"style="width: 100%;margin: 30px auto 0;display: block;">
### Cambiando el color del tema
### Cambiando el color del tema
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.
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.
...
@@ -102,9 +100,9 @@ et
...
@@ -102,9 +100,9 @@ et
> ✔ build element theme
> ✔ build element theme
```
```
### Use custom theme
### Uso de los temas personalizados
#### <strong>Importar un tema personalizado</strong>
#### <strong>Importar un tema personalizado</strong>
Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":
Importar su propio tema es igual que importar el tema por defecto, sol que esta vez se deben importar los archivos construidos con "Online Theme Roller" o "CLI tool":
| default-value | opcional, valor por defecto para el calendario | Date | cualquiera aceptado por `new Date()` | — |
| default-value | opcional, valor por defecto para el calendario | Date | cualquiera aceptado por `new Date()` | — |
| default-time | opcional, los valores para las horas que se deben usar en la seleccion de fechas cuando se usa el modo rango | string[] | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | — |
| default-time | opcional, los valores para las horas que se deben usar en la selección de fechas cuando se usa el modo rango | string[] | Array de dos valores, cada uno es un string del estilo `12:00:00`. El primer elemento es para la fecha de inicio y el segundo es para la fecha final. | — |
| value-format | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string | ver [date formats](#/es/component/date-picker#date-formats) | — |
| value-format | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string | ver [date formats](#/es/component/date-picker#date-formats) | — |
| name | igual que `name` en el input nativo | string | — | — |
| name | igual que `name` en el input nativo | string | — | — |
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false |
...
@@ -474,18 +474,18 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
...
@@ -474,18 +474,18 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
@@ -50,11 +50,11 @@ Llamada de un drawer temporal, desde varias direcciones
...
@@ -50,11 +50,11 @@ Llamada de un drawer temporal, desde varias direcciones
```
```
:::
:::
### No Title
### Sin titulo
When you no longer need a title, you can remove title from drawer.
Si no necesitas el titulo lo puedes eliminar del drawer.
:::demo Set the `withHeader` attribute to **false**, you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the `title` attribute.
:::demo Asigne **false** al atributo `withHeader`, se puede eliminar el atributo title del drawer, de esa manera el drawer tendrá mas espacio para el contenido. Por razones de accesibilidad se recomienda asignar siempre un contenido valido al atributo `title`.
@@ -280,7 +280,7 @@ Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede
...
@@ -280,7 +280,7 @@ Si la variable `visible` se gestiona en el almacén de Vuex, el `.sync` no puede
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
| title | El título del Drawer, también se puede establecer por slot con nombre, las descripciones detalladas se pueden encontrar en el formulario de slot. | string | — | — |
| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |
| visible | Si se muestra el Drawer, también soporta la notación `.sync` | boolean | — | false |
| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |
| wrapperClosable | Indica si el usuario puede cerrar el Drawer haciendo clic en la capa de sombreado. | boolean | - | true |
| withHeader | Flag that controls the header section's existance, default to true, when withHeader set to false, both `title attribute` and `title slot` won't work | boolean | - | true |
| withHeader | Indica si la sección header existirá, por defecto es true, cuando es false no tienen efecto, ambos, `title attribute` y `title slot` | boolean | - | true |
@@ -38,7 +38,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones
...
@@ -38,7 +38,7 @@ Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones
Utilizando un botón para activar la lista desplegable.
Utilizando un botón para activar la lista desplegable.
:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonación. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
```html
```html
<el-dropdown>
<el-dropdown>
...
@@ -290,13 +290,13 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
...
@@ -290,13 +290,13 @@ Además del tamaño predeterminado, el componente Dropdown proporciona tres tama
| dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |
| dropdown | contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>` |
@@ -392,7 +392,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
...
@@ -392,7 +392,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
:::
:::
### Eliminar o agregar validaciones dinamicamente
### Eliminar o agregar validaciones dinámicamente
:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
:::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
...
@@ -471,7 +471,7 @@ Se debe llamar a la función de validación de llamada de retorno personalizada.
...
@@ -471,7 +471,7 @@ Se debe llamar a la función de validación de llamada de retorno personalizada.
:::
:::
### Validación numerica
### Validación numérica
:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
:::demo La validación numérica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
...
@@ -617,9 +617,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
...
@@ -617,9 +617,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| size | el tamaño de los componentes en este form | string | medium / small / mini | — |
| size | el tamaño de los componentes en este form | string | medium / small / mini | — |
| disabled | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | — | false |
| disabled | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | — | false |
| validate | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| validate | el método para validar todo el formulario. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| validateField | validar uno o varios elementos de formulario | Function(props: string \| array, callback: Function(errorMessage: string)) |
| validateField | validar uno o varios elementos de formulario | Function(props: string \| array, callback: Function(errorMessage: string)) |
...
@@ -627,9 +627,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
...
@@ -627,9 +627,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \| array) |
| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: string \| array) |
| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
...
@@ -660,9 +660,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
...
@@ -660,9 +660,9 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| infinite-scroll-disabled | si esta disabled | boolean | - |false |
| infinite-scroll-disabled | si esta disabled | boolean | - |false |
| infinite-scroll-delay | retraso en milisegundos | number | - |200 |
| infinite-scroll-delay | retraso en milisegundos | number | - |200 |
| infinite-scroll-distance| distancia de activación (px) | number |- |0 |
| infinite-scroll-distance| distancia de activación (px) | number |- |0 |
| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
| infinite-scroll-immediate |Si se debe ejecutar el método de carga inmediatamente, en caso de que el contenido no se pueda rellenar en el estado inicial. | boolean | - |true |
Redimensiona para introducir varias líneas de información de texto. Agregue el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
Redimensiona para introducir varias líneas de información de texto. Agregue el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
:::demo Controle la altura ajustando el prop `rows`.
:::demo Controle la altura ajustando el prop `rows`.
@@ -20,7 +20,7 @@ Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/eleme
...
@@ -20,7 +20,7 @@ Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/eleme
```
```
##Tip
##Tip
Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
Recomendamos a nuestros usuarios congelar la versión de Element cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
@@ -196,7 +196,7 @@ Llamar al método `close` en cualquiera de estas puede cerrarlo.
...
@@ -196,7 +196,7 @@ 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. Puede 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
### Opciones
| 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 |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false |
| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como una cadena HTML | boolean | — | false |
| type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — |
| type | tipo de mensaje , utilizado para mostrar el icono | string | success / info / warning / error | — |
| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — |
| iconClass | clase personalizada para el icono, sobrescribe `type` | string | — | — |
| customClass | nombre de la clase personalizada para el componente MessageBox | string | — | — |
| customClass | nombre de la clase personalizada para el componente MessageBox | string | — | — |
| callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — |
| callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm', 'cancel' o 'close', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — |
| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm', 'cancel' o 'close'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — |
@@ -181,7 +181,7 @@ Utiliza el atributo `center` para centrar el texto.
...
@@ -181,7 +181,7 @@ Utiliza el atributo `center` para centrar el texto.
:::
:::
:::warning
:::warning
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegurese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
Aunque la propiedad `message` soporta cadenas HTML, realizar arbitrariamente render dinámico de HTML en nuestro sitio web puede ser muy peligroso ya que puede conducir fácilmente a [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Entonces cuando `dangerouslyUseHTMLString` esta activada, asegúrese que el contenido de `message` sea de confianza, y **nunca** asignar `message` a contenido generado por el usuario.
:::
:::
### Métodos Globales
### Métodos Globales
...
@@ -198,15 +198,15 @@ import { Message } from 'element-ui';
...
@@ -198,15 +198,15 @@ import { Message } from 'element-ui';
En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
En este caso debería llamar al método `Message(options)`. También se han registrado métodos para los diferentes tipos, e.g. `Message.success(options)`. Puede llamar al método `Message.closeAll()` para cerrar manualmente todas las instancias.
### Options
### Opciones
| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto |
| Atributo | Descripción | Tipo | Valores permitidos | Por defecto |
@@ -4,7 +4,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
...
@@ -4,7 +4,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
### Uso básico
### Uso básico
:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration` se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration` se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
```html
```html
<template>
<template>
...
@@ -313,6 +313,6 @@ En este caso, debe llamar a `Notification(options)`. También se han registrado
...
@@ -313,6 +313,6 @@ En este caso, debe llamar a `Notification(options)`. También se han registrado
### Métodos
### Métodos
`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
`Notification` y `this.$notify` devuelven la instancia de la notificación actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello.
@@ -150,8 +150,8 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
...
@@ -150,8 +150,8 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| visible-arrow | si una flecha del tooltip es mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-options | parámetros para [popper.js](https://popper.js.org/documentation.html) | object | por favor, refiérase a [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | clase propia para popover | string | — | — |
| popper-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
| close-delay | Retraso antes de desaparecer cuando el `trigger` es hover, en milisegundos. | number | — | 200 |
| close-delay | Retraso antes de desaparecer cuando el `trigger` es hover, en milisegundos. | number | — | 200 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) de Popover | number | — | 0 |
@@ -186,7 +186,7 @@ Puede limpiar un Select con un icono.
...
@@ -186,7 +186,7 @@ Puede limpiar un Select con un icono.
### Selección múltiple básica
### Selección múltiple básica
Selección multiple utiliza tags para mostrar las opciones seleccionadas.
Selección múltiple utiliza tags para mostrar las opciones seleccionadas.
:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo `collapse-tags`.
:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. De forma predeterminada, las opciones seleccionadas se mostrarán como tags. Se pueden contraer a un texto utilizando el atributo `collapse-tags`.
...
@@ -562,7 +562,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
...
@@ -562,7 +562,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
| automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false |
| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
| tooltip-class | nombre personalizado de clase para el tooltip | string | — | — |
| tooltip-class | nombre personalizado de clase para el tooltip | string | — | — |
| marks | marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado | object | — | — |
| marks | marcas, tipo de clave debe ser `number` y debe estar en intervalo cerrado [min, max], cada marca puede tener estilo personalizado | object | — | — |
| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor después del cambio |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |
| input | Se dispara cuando los datos cambian (funciona en tiempo real) | valor después del cambio |
| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number | — | — |
| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos. | string/number | — | — |
| max-height | Table's max-height. The legal value is a number or the height in px. | string/number | — | — |
| max-height | El max-height de la tabla. El valor puede ser un numero o el alto en px. | string/number | — | — |
| stripe | especifica si la tabla será en franjas | boolean | — | false |
| stripe | especifica si la tabla será en franjas | boolean | — | false |
| border | especifica si la tabla tiene bordes verticales | boolean | — | false |
| border | especifica si la tabla tiene bordes verticales | boolean | — | false |
| size | tamaño de la tabla | string | medium / small / mini | — |
| size | tamaño de la tabla | string | medium / small / mini | — |
@@ -34,7 +34,7 @@ Provee una lista de tiempo fijo para que los usuarios escojan.
...
@@ -34,7 +34,7 @@ Provee una lista de tiempo fijo para que los usuarios escojan.
Un tiempo arbitrario puede ser escogido.
Un tiempo arbitrario puede ser escogido.
:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del mouse para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
:::demo Al usar el tag `el-time-picker`, es posible limitar el rango de tiempo al especificar `selectableRange`. Por defecto, es posible hacer scroll con la rueda del ratón para escoger el tiempo, alternativamente se pueden utilizar las flechas de control cuando el atributo `arrow-control` esté establecido.
@@ -6,7 +6,7 @@ Mostrar aviso de información con el hover del mouse.
...
@@ -6,7 +6,7 @@ Mostrar aviso de información con el hover del mouse.
Tooltip tiene 9 colocaciones.
Tooltip tiene 9 colocaciones.
:::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.
:::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 por defecto 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
<divclass="box">
<divclass="box">
<divclass="top">
<divclass="top">
...
@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` y `light`.
...
@@ -116,7 +116,7 @@ Tooltip tiene dos temas: `dark` y `light`.
Despliegue múltiples líneas de texto y establezca su formato.
Despliegue múltiples líneas de texto y establezca su formato.
:::demo Sobrecriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
:::demo Sobrescriba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`.
@@ -172,7 +172,7 @@ De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/el
...
@@ -172,7 +172,7 @@ De hecho, Tooltip es una extensión basada en [Vue-popper](https://github.com/el
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
Elementos de forma deshabilitados no son soportados por Tooltip, más información puede ser encontrada en [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter).
Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione.
Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltip funcione.
:::
:::
...
@@ -188,9 +188,9 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
...
@@ -188,9 +188,9 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
| transition | nombre de animación | string | — | el-fade-in-linear |
| transition | nombre de animación | string | — | el-fade-in-linear |
| 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 |
| 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 | 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 | si el mouse puede entrar al Tooltip | Boolean | — | true |
| enterable | si el ratón 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 |
:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
:::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del ítem contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada ítem. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
```html
```html
<template>
<template>
<el-transfer
<el-transfer
...
@@ -213,7 +213,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
...
@@ -213,7 +213,7 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
:::
:::
### Atributos
### Atributos
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
| change | se lanza cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
| left-check-change | se dispara cuando el usuario final cambia el estado verificado de cualquier elemento de datos en la lista izquierda | array clave de ítems actualmente verificados, array clave de ítems cuyo estado verificado ha cambiado |
@@ -150,9 +150,9 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
...
@@ -150,9 +150,9 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
```
```
:::
:::
### Custom file thumbnail
### Personalizar el template thumbnail
Use `scoped-slot` to change default thumbnail template.
Use el `scoped-slot` para cambiar el template por defecto del thumbnail.
:::demo
:::demo
```html
```html
...
@@ -359,20 +359,20 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
...
@@ -359,20 +359,20 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
| 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 auto cargan archivos | boolean | — | true |
| http-request | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| http-request | sobrescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — |
| limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |