@@ -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
...
...
@@ -208,18 +208,18 @@ Descripción incluye un mensaje con información más detallada.
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
::: 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
<template>
...
...
@@ -213,7 +213,7 @@ Cuando una página es suficientemente ancha pero tiene una altura limitada, pued
:::
### Atributos de Carousel
| Atributo | Descripcion | Tipo | Valores aceptados | Por Defecto |
| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto |
@@ -30,7 +30,7 @@ Use Collapse para almacenar contenidos.
### Uso básico
Puedes expandir varios paneles
Puede expandir varios paneles
:::demo
```html
...
...
@@ -104,7 +104,7 @@ En modo acordeón sólo un panel puede ser expandido a la vez
### 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
```html
...
...
@@ -134,19 +134,19 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
:::
### Atributos de Collapse
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
@@ -87,7 +87,7 @@ El color principal de Element es el azul brillante y amigable.
### 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-col:span="6">
...
...
@@ -106,7 +106,7 @@ Además del color principal, necesitas utiizar distintos colores para diferentes
### 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.
@@ -72,8 +72,7 @@ De lo contrario, de forma horizontal.
`<el-footer>`: Contenedor para pie de página.
:::tip
Estos componentes utilizan flex para el diseño, así que asegúrate que el navegador lo soporte. Además, los elementos directos de `<el-container>` tienen que
ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
Estos componentes utilizan flex para el diseño, así que 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>`.
:::
### Diseños comunes
...
...
@@ -282,20 +281,20 @@ ser uno o más de los últimos cuatro componentes. Y el elemento padre de los ú
### Atributos de contenedor
| 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 |
### Atributos de cabecera
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
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
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
`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`:
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
import Vue from 'vue'
import Element from 'element-ui'
...
...
@@ -33,15 +33,15 @@ Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de la
:::
### CLI para generar temas
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>
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
npm i element-theme -g
```
Ahora, instala el tema `chalk` desde npm o Github.
Ahora, instale el tema `chalk` desde npm o Github.
```shell
# desde npm
npm i element-theme-chalk -D
...
...
@@ -51,7 +51,7 @@ npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>Inicializar archivo de variables</strong>
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
et -i[custom output file]
...
...
@@ -59,7 +59,7 @@ et -i [custom output 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:
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
$--color-primary: red;
```
#### <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
et
...
...
@@ -96,7 +96,7 @@ et
```
#### <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
import'../theme/index.css'
...
...
@@ -107,7 +107,7 @@ Vue.use(ElementUI)
```
#### <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
{
"plugins":[["component",[
...
...
@@ -119,4 +119,4 @@ Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo de
}
```
Si no estas familiarizado con `babel-plugin-component`, por favor dirígete a la documentación sobre <ahref="./#/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`.
\ No newline at end of file
Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre <ahref="./#/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`.
Informar usuarios cuando preserva el estado de página corriente.
Informar a usuarios preservando el estado de la página actual.
### Uso Básico
Diálogo que se surge una caja de diálogo,y es bastante personalizable.
Dialog abre una caja de diálogo, y es bastante personalizable.
:::demo Establece el atributo con un `Boolean`, y Diálogo muestra cuando es `true`.El Diálogo tiene dos partes:`body` y `footer`, y el último exige un `slot`llamado `footer`.El atributo opcional `title` (vacío por defecto) es para definir un título.Finalmente,este ejemplo demostra cómo `before-close` es usado.
:::demo Establezca el atributo `visible` con un booleano, y el Dialog se muestra cuando es `true`. El diálogo tiene dos partes: `body` y `footer`, este último requiere un slot llamado `footer`. El atributo `title` es opcional (vacío por defecto) y sirve para definir un título. Por último, este ejemplo muestra cómo se utiliza `before-close`.
```html
...
...
@@ -122,13 +122,14 @@ Diálogo que se surge una caja de diálogo,y es bastante personalizable.
:::tip
`before-close` solamente funciona cuando usuarios se hacen clic el icono de cerrar o el fondo.Si tienes botones que cercan el Diálogo en el `footer` que se llamado slot,puedes añadir que harías con `before-close` en controlador del evento click de los botones.
`before-close` sólo funciona cuando el usuario hace clic en el icono de cerrar o en el fondo. Si tiene botones que cierran el cuadro de diálogo en el slot llamado `footer`, puede agregar lo que haría `before-close` en el manejador de eventos de los botones.
:::
### Personalizaciones
El contenido de Diálogo puede ser cualquier cosa,hasta una mesa o un formulario.Este ejemplo muestra cómo utilizar Mesa y Formulario de Element con Diálogo.
El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formulario. Este ejemplo muestra cómo usar Element Table y Form con Dialog
:::demo
...
...
@@ -207,8 +208,9 @@ El contenido de Diálogo puede ser cualquier cosa,hasta una mesa o un formulario
:::
### Diálogo anidado
Si un cuadro de diálogo está anidado en otro cuadro de diálogo,`append-to-body` es requerido.
:::demo Normalmente no recomendamos el uso de Diálogo anidado.Si necesitas varios cuadros de diálogo representados en la página,puedes aplastarlos simplemente así que serían hermanos el uno al otro.Si tienes que anidar un cuadro de diálogo dentro de otro cuadro de diálogo,establece `append-to-body` del diálogo anidado a verdadero,y se agregará al cuerpo en combio de su nodo padre,asi que ambos diálogos pueden ser renderizados correctamente.
Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
:::demo Normalmente no recomendamos el uso de Dialog anidado. Si necesita que se muestren múltiples diálogos en la página, puede simplemente aplanarlos para que sean hermanos entre sí. Si debe anidar un Diálogo dentro de otro Diálogo, establezca `append-to-body` del Diálogo anidado como true, y lo añadirá al cuerpo en lugar de su nodo padre, para que ambos Diálogos puedan ser correctamente renderizados.
```html
<template>
...
...
@@ -244,9 +246,9 @@ Si un cuadro de diálogo está anidado en otro cuadro de diálogo,`append-to-bod
:::
### Contenido centrado
el contenido de Diálogo se puede centrar.
El contenido de Diálogo se puede centrar.
:::demo establecer `center` en `true` se centrará el encabezado y el pie de página del cuadro de diálogo horizontalmente.
:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente.
```html
<el-buttontype="text"@click="centerDialogVisible = true">Click to open the Dialog</el-button>
...
...
@@ -276,35 +278,36 @@ el contenido de Diálogo se puede centrar.
:::
:::tip
`center`afecta a cabezazos y pies de Diálogo.El cuerpo de Diálogo puede ser cualquier cosa,asi que a veces no puede verse bien cuando está centrado.Necesitas escribir algunos CSS si quieres centrar el cuerpo también.
`center`sólo afecta al encabezado y pie de página de Dialog. El cuerpo de Dialog puede ser cualquier cosa, así que a veces no se ve bien cuando está centrado. Necesitas escribir algún CSS si deseas centrar el cuerpo también.
:::
:::tip
Si el variable obligado a `visible` es manejado en el almacén Vuex,el `.sync` no puede funcionar correctamente.En este caso,quita el modificador `.sync` por favor,escucha a eventos `open` y `close` de Diálogo,y comete Vuex mutaciones para actualizar el valor de la variable en los controladores de eventos.
Si la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos.
| visible | visibilidad del Diálogo, apoya el modificador .sync | boolean | — | false |
| title | título de Diálogo. También se puede pasar con una ranura nombrada (ver la tabla siguiente) | string | — | — |
| title | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string | — | — |
| width | anchura de Diálogo | string | — | 50% |
| fullscreen | si el diálogo ocupa pantalla completa | boolean | — | false |
| top | valor de `margin-top` del Diálogo CSS | string | — | 15vh |
| modal | si se muestra una máscara | boolean | — | true |
| modal-append-to-body | si adjuntar modal al elemento de cuerpo. Si es falso,el modal se agregará al elemento principal de Diálogo | boolean | — | true |
| append-to-body | Si adjuntar el cuadro de diálogo al cuerpo | boolean | — | false |
| lock-scroll | Si voluta de cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean | — | true |
| lock-scroll | Si el scroll del cuerpo está desactivado mientras se muestra el cuadro de diálogo | boolean | — | true |
| custom-class | nombres de clase personalizada para el Diálogo | string | — | — |
| close-on-click-modal | si el Diálogo puede ser cerrado por haciendo clic en la máscara | boolean | — | true |
| close-on-press-escape | si el Diálogo puede ser cerrado por presionando ESC | boolean | — | true |
| close-on-click-modal | si el Diálogo puede ser cerrado haciendo clic en la máscara | boolean | — | true |
| close-on-press-escape | si el Diálogo puede ser cerrado presionando ESC | boolean | — | true |
| show-close | si mostrar un botón de cerrar | boolean | — | true |
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitará el cuadro de diálogo de cerrar | función(done) `done`se usa para cerrar el diálog | — | — |
| before-close | una devolución de llamada antes de que se cierre el cuadro de diálogo, y evitar cerrar el cuadro de diálogo | función(done) `done`se usa para cerrar el diálog | — | — |
| center | si alinear el encabezado y el pie de página en el centro | boolean | — | false |
@@ -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.
:::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.
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.
:::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.
@@ -248,7 +248,7 @@ Puedes especificar offsets para las 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.
@@ -343,17 +343,17 @@ Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm
### 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
import'element-ui/lib/theme-chalk/display.css';
```
Las clases son:
-`hidden-xs-only` - oculto en viewports extra pequenhos solamente
-`hidden-sm-only` - oculto en viewports pequenhos solamente
-`hidden-sm-and-down` - oculto en viewports pequenhos y menores
-`hidden-sm-and-up` - oculto en viewports pequenhos y superiores
-`hidden-xs-only` - oculto en viewports extra pequeños solamente
-`hidden-sm-only` - oculto en viewports pequeños solamente
-`hidden-sm-and-down` - oculto en viewports pequeños y menores
-`hidden-sm-and-up` - oculto en viewports pequeños y superiores
-`hidden-md-only` - oculto en viewports medios solamente
-`hidden-md-and-down` - oculto en viewports medios y menores
-`hidden-md-and-up` - oculto en viewports medios y mayores
...
...
@@ -365,9 +365,9 @@ Las clases son:
### Atributos Row
| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto |
@@ -115,9 +115,9 @@ Muestra una animación en un contenedor (como en una tabla) mientras se cargan l
### 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
<template>
<el-table
...
...
@@ -173,7 +173,7 @@ Puedes personalizar el texto de carga, spinner de carga y color de fondo.
Muestra una animación de pantalla completa mientras se cargan los datos
:::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
<template>
...
...
@@ -223,7 +223,7 @@ Muestra una animación de pantalla completa mientras se cargan los datos
### Servicio
Puedes invocar el componente con un servicio. Importa el servicio:
Puede invocar el componente con un servicio. Importe el servicio:
```javascript
import{Loading}from'element-ui';
...
...
@@ -232,7 +232,7 @@ Invocar:
```javascript
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`:
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
| 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 |
| body | igual que el modificador `body` de `v-loading` | boolean | — | false |
| fullscreen | igual que el modificador `fullscreen` de `v-loading` | boolean | — | true |
@@ -59,7 +59,7 @@ Menú que provee la navegación para tu sitio.
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.
@@ -113,7 +113,7 @@ Top bar NavMenu puede ser usado en distinto escenarios.
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
<el-rowclass="tac">
...
...
@@ -272,8 +272,8 @@ NavMenu vertical puede ser colapsado.
:::
### Atributos Menu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
@@ -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.
:::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
<template>
...
...
@@ -123,7 +123,7 @@ Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
:::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`.
@@ -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.
:::
### 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
...
...
@@ -279,12 +279,12 @@ Import `Message`:
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)`.
Puedes llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`.
Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
@@ -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 |
### 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`.
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
:::**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
<divclass="block">
<spanclass="demonstration">When you have few pages</span>
...
...
@@ -72,11 +72,11 @@ Si tiene que mostrar muchos datos en una página, utiliza la paginación.
```
:::
### Paginación pequenha
### Paginación pequeña
Usa una paginación pequenha en caso de espacio limitado.
Usa una paginación pequeña en caso de espacio limitado.
:::**Demo** Solo pon el atributo `small` como `true` y la Paginación se volverá pequenha.
:::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
```html
<el-pagination
small
...
...
@@ -88,9 +88,9 @@ Usa una paginación pequenha en caso de espacio limitado.
### 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
<template>
...
...
@@ -195,9 +195,9 @@ Agrega más modulos basados en tu escenario.
</script>
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
| page-size | cantidad de elementos por página | number | — | 10 |
| 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 | — | — |
...
...
@@ -210,11 +210,11 @@ Agrega más modulos basados en tu escenario.
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
<el-popover
...
...
@@ -218,8 +218,8 @@ Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `d
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
| 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-class | clase propia para popover | string | — | — |
| open-delay | retraso de la aparición cuando `trigger` es hover, en milisegundos | number | — | — |
@@ -37,7 +37,7 @@ En este caso el porcentage no toma espacio adicional.
### 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.
@@ -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
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
...
...
@@ -21,7 +21,7 @@ Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cl
### 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
...
...
@@ -43,15 +43,15 @@ El código anterior importa Element completamente. Nótese que el archivo CSS ne
#### 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
npm install babel-plugin-component -D
```
Luego edita .babelrc:
Luego edite .babelrc:
```json
{
"presets":[
...
...
@@ -66,7 +66,7 @@ Luego edita .babelrc:
}
```
Luego, si necesitas Button y Select, edita main.js:
Luego, si necesita Button y Select, edite main.js:
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：
```JS
...
...
@@ -251,10 +251,10 @@ import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' }
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!
Ahora haz incorporado Vue y Element a tu proyecto es tiempo para comenzar a programar. Inicia el modo de desarrollo:
### Empiece ya!
Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:
@@ -24,7 +24,7 @@ Selección única entre múltiples opciones.
### Uso básico
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`.
@@ -70,7 +70,7 @@ El atributo `disabled` es utilizado para deshabilitar un Radio.
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
<el-radio-groupv-model="radio2">
...
...
@@ -95,7 +95,7 @@ Recomendado para seleccionar opciones que se excluyen mutuamente.
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
<template>
<div>
...
...
@@ -149,7 +149,7 @@ Radio con estilo de botón.
### Con bordes
:::**Demo** El atributo `border` agrega un borde al elemento Radios.
:::demo El atributo `border` agrega un borde al elemento Radio.
```html
<template>
<div>
...
...
@@ -191,41 +191,41 @@ Radio con estilo de botón.
### Atributos de Radio
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
---- | ---- | ---- | ---- | ----
label | el valor del Radio | string / number / boolean | — | —
disabled | si el Radio está deshabilitado| 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 | —
name | atributo nativo 'name'| string | — | —
| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto |
:::**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
...
...
@@ -78,7 +78,7 @@ Usado para la calificació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
<el-rate
...
...
@@ -101,9 +101,9 @@ Usa texto para indicar la puntuación
### 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
<el-rate
...
...
@@ -127,9 +127,9 @@ Puedes utilizar iconos para diferenciar cada componente.
### 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
<el-rate
...
...
@@ -153,8 +153,8 @@ La calificación de solo lectura is para mostrar la puntuación. Soporta media e
:::
### Atributos
| Atributo | Descripción| Tipo| Valores aceptado| Valores por defecto|
@@ -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 |
| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
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
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
<template>
...
...
@@ -211,7 +211,7 @@ Es posible usar el atributo `tab-position` para establecer la posición de la ta
### 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
```html
...
...
@@ -368,8 +368,8 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre.
| 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' |
| readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
| disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
| editable | si el input puede ser editado | boolean | — | true |
| clearable | si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder en un modo fuera 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 | — | — |
| is-range | saber 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 |
| is-range | si es posible escoger un rango de tiempo, 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 |
| align | alineación | left / center / right | left |
| popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — |
| align | alineación | left / center / right | left | |
| popper-class | nombre de clase personalizada para el dropdown del Time Picker | string | — | — |
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| 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 | — |
| value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | así como `name` en input nativo | string | — | — |
| value-format | opcional, solo para Time Picker, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | como `name` en input nativo | string | — | — |
Mostrar aviso de información para el hover del mouse.
Mostrar aviso de información con el hover del mouse.
### Uso básico
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
<divclass="box">
<divclass="top">
...
...
@@ -173,7 +173,7 @@ Tooltip tiene dos temas: `dark` and `light`.
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`.
@@ -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:
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`.
...
...
@@ -225,8 +225,8 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
| effect | tema del Tooltip | string | dark/light | dark |
| 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 |
...
...
@@ -234,10 +234,10 @@ Es necesario envolver los elementos de forma deshabilitados en un elemento conte
| disabled | saber si el Tooltip se encuentra deshabilitado | boolean | — | false |
| offset | offset del Tooltip | number | — | 0 |
| 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 }` |
| 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 | — | — |
| 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 |
:::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
<template>
<el-transfer
...
...
@@ -108,9 +108,9 @@
### 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
<template>
<el-transfer
...
...
@@ -151,11 +151,11 @@ Puedes buscar y filtrar los items.
```
:::
### Customizable
### Personalizable
Puedes customizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
:::demo Usa `titles`, `button-texts`, `render-content` y `format` respectivamente para customizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quieres algunos items marcados inicialmente pudes usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Ten en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
:::demo Use `titles`, `button-texts`, `render-content` y `format` respectivamente para personalizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quiere algunos items marcados inicialmente puede usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Tenga en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
```html
<template>
<el-transfer
...
...
@@ -217,11 +217,11 @@ Puedes customizar los títulos, botones, la función de renderizado de los items
```
:::
### Prop aliases
### Prop con alias
Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias.
Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si sus datos tienen un nombre diferente para la clave puede usar el atributo `props` para añadir alias.
:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tiene que añadir alias para `key` y `label`.
```html
<template>
<el-transfer
...
...
@@ -260,27 +260,27 @@ Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada el
### Atributos
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
| 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} | — | — |
| 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 | — | [] |
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).
@@ -126,7 +126,7 @@ Carga archivos haciendo clic o arrastrándolos.
### 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
<el-upload
class="upload-demo"
...
...
@@ -165,7 +165,7 @@ Carga archivos haciendo clic o arrastrándolos.
### 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
```html
...
...
@@ -236,7 +236,7 @@ Utiliza el _hook_ `before-upload` para limitar el formato de archivo y su tamañ
### 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
```html
...
...
@@ -308,7 +308,7 @@ Utiliza la propiedad `list-type` para cambiar el estilo a un listado 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
```html
...
...
@@ -347,7 +347,7 @@ Utiliza el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
### 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
```html
...
...
@@ -392,35 +392,35 @@ Puedes arrastrar el archivo dentro de un área en especifico para cargar el arch
:::
### Atributos
Atributo | Descripción | Tipo | Valores aceptados | Por defecto
----| ----| ----| ----| ----
action | obligatorio, URL de la petición | string | — | —
headers | cabeceras de la petición | object | — | —
multiple | especifica si se permite subir múltiples archivos | boolean | — | —
data | opciones adicionales de la petición | object | — | —
name | nombre clave del archivo | string | — | file
with-credentials | especifica si enviará cookies | boolean | — |false
show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true
drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false
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 | — | —
on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | —
on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | —
on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | —
on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | —
on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
on-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) | — | —
thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false
file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
auto-upload | se especifica si se autocargan archivos | boolean | — | true |
http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
limit | número máximo de cargas permitidas | number | — | — |
on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| action | obligatorio, URL de la petición | string | — | — |
| headers | cabeceras de la petición | object | — | — |
| multiple | especifica si se permite subir múltiples archivos | boolean | — | — |
| data | opciones adicionales de la petición | object | — | — |
| name | nombre clave del archivo | string | — | file |
| with-credentials | especifica si enviará cookies | boolean | — | false |
| show-file-list | especifica si se debe mostrar la lista de archivos cargados | boolean | — | true |
| drag | se especifica si se activará el modo arrastrar y soltar | boolean | — | false |
| accept | acepta [tipos de archivos](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), puede no funcionar cuando `thumbnail-mode` esta en `true` | string | — | — |
| on-preview | _hook_ lanzado al hacer clic en los archivos subidos | function(file) | — | — |
| on-remove | _hook_ lanzado cuando los archivos son eliminados | function(file, fileList) | — | — |
| on-success | _hook_ lanzado cuando los archivos fueron cargados correctamente | function(response, file, fileList) | — | — |
| on-error | _hook_ lanzado cuando han ocurrido algunos errores | function(err, file, fileList) | — | — |
| on-progress | _hook_ lanzado cuando se produce algún progreso | function(event, file, fileList) | — | — |
| on-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) | — | — |
| thumbnail-mode | especifica si se mostrará la miniatura | boolean | — | false |
| file-list | archivos cargados por defecto, por ejemplo, [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |
| list-type | tipo de lista de archivos | string | text/picture/picture-card | text |
| auto-upload | se especifica si se autocargan archivos | boolean | — | true |
| http-request | sobreescribe el comportamiento por defecto de xhr, permitiendo implementar tu propia petición de carga de archivos | function | — | — |
| disabled | especifica si se deshabilita la carga de archivos | boolean | — | false |
| limit | número máximo de cargas permitidas | number | — | — |
| on-exceed | _hook_ lanzado cuando el límite ha sido excedido | function(files, fileList) | — | - |
