diff --git a/CHANGELOG.es-SP.md b/CHANGELOG.es-SP.md new file mode 100644 index 000000000..e2e639408 --- /dev/null +++ b/CHANGELOG.es-SP.md @@ -0,0 +1,253 @@ +## Changelog + +### 2.0.7 + +*2017-11-29* + +- Solucionado el estilo disabled en el texto de button, #8570 + +### 2.0.6 + +*2017-11-29* + +- Corregido error de estilo de los iconos de ordenación de Table, #8405 +- Corregido activacion para Popover cuando `trigger` es manual, #8467 +- Añadidos los atributos `prefix-icon` y `suffix-icon` para Autocomplete, #8446 (por @liyanlong) +- Añadido el atributo `separator` para Cascader, #8501 +- Añadido atributo `clearable` para Input, #8509 (by @lbogdan) +- Añadido atributo `background` para Pagination, #8553 + +### 2.0.5 + +*2017-11-17* + +- Solucionado regresion en 2.0.4 de Popover, Tree, Breadcrumb and Cascader, #8188 #8217 #8283 +- Solucionado Fuga de memoria de la directiva clickoutside, #8168 #8225 (por @badpunman @STLighter) +- Solucionada la altura en multiple Select cuando se borra su valor, #8317 (por @luciy) +- Añadido el atributo `collapse-tags` para multiple Select para reemplazar las tags con una línea de texto, #8190 +- Solucionado el alto consumo de CPU causado por Table cuando esta oculta, #8351 +- Ahora puede usar el método `doLayout` de Table para actualizar su diseño, #8351 + +### 2.0.4 + +*2017-11-10* + +- Accesibilidad mejorada para Cascader, Dropdown, Message, Notification, Popover, Tooltip y Tree +- Arreglado el cambio de tamaño del Container cuando el ancho de la vista disminuye, #8042 +- Arreglado Tree's `updateKeyChildren` borraba incorrectamente los nodos hijos, #8100 +- Arreglado la altura de los bordes de CheckboxBotón's cuando esta anidado en un Form, #8100 +- Arreglado error de análisis de los Menu's para los colores personalizados, #8153 (by @zhouyixiang) + +### 2.0.3 + +*2017-11-03* + +- Solucionado atributos `editable` and `readonly` de DatePicker de los rangos, #7922 +- Corregido error de estilo de los Tabs anidados, #7941 +- Corregido error de estilo del último Step de Steps verticales, #7980 +- Corregido el tiempo de activación del evento `current-change` para Pagination, #7995 +- Corregido Tooltip no registrado en el Menu, #7995 + +### 2.0.2 + +*2017-10-31* + +- Ahora haciendo clic con el botón derecho del ratón en los botones de InputNumber no cambiará su valor, #7817 +- El metodo `validate` de Form ahora puede esperar por validaciones asíncronas antes de ejecutar su devolución de llamada, #7774 (por @Allenice) +- Corregido la selección de rango de DatePicker no funcionaba en los navegadores Chromium 53-57, #7838 +- Corregido la perdida de previsualización e iconos de eliminar de Upload cuando su `list-type` es picture-card, #7857 +- Añadido el atributo `sort-by` para TableColumn, #7828 (por @wangfengming) +- Corregido que a veces DatePicker muestra un número de año incorrecto al seleccionar la primera semana en modo week, #7860 (por @hh23485) +- Corregido error de estilo de icono de Step vertical, #7891 +- El área hot para las flechas de nodo en Tree se expandia, #7891 + +### 2.0.1 + +*2017-10-28* + +- Fixed style error of RadioButton and CheckboxButton, #7793 +- Fixed TimePicker not respond to mouse scroll in some conditions, #7811 +- Fixed incomplete styles of some components when imported on demand, #7811 +- Corregido error de estilo de RadioButton y CheckboxButton, #7793 +- Corregido TimePicker no responde al desplazamiento del ratón en algunas condiciones, #7811 +- Corregido estilos incompletos de algunos componentes cuando se importan bajo demanda, #7811 + +### 2.0.0 Carbon + +*2017-10-27* + +#### New features + +- General + - Un nuevo tema: `theme-chalk` + - Se ha mejorado la accesibilidad de los siguientes componentes: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload + - Añadido tipografías TypeScript + - Todos los iconos existentes son rediseñados. Se han añadido algunos iconos nuevos + - Añadida una serie de clases de utilidades basadas en puntos de ruptura que ocultan elementos cuando el tamaño del viewport cumple ciertas condiciones + - Componentes de diseño añadidos: Container, Header, Aside, Main, Footer. + - Ahora puede configurar los tamaños de componentes a nivel global. Al importar Element, puede añadir un objeto de configuración global con un prop `size` para configurar tamaños predeterminados para todos los componentes. +- Button + - Atributo `round` añadido. Se usa para botones de esquinas redondas #6643 +- TimeSelect + - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6023 +- TimePicker + - Ahora puede ser navegado por `Up` y `Down`, y presionando `Enter` selecciona la hora #6050 + - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169 + - Añadido el atributo `arrow-control` para hacer girar el tiempo con las flechas #7438 +- Tree + - Ahora los nodos hijo no se renderizan antes de la primera expansión #6257 + - Añadido el atributo `check-descendants`. Determina si los nodos hijo se seleccionan al seleccionar su nodo padre en modo `lazy` #6235 +- Tag + - Atributo `size` añadido #7203 +- Datepicker + - Ahora `timeFormat` puede dar formato al TimePicker cuando type está configurado en `datetimerange` #6052 + - Añadido `start-placeholder` y `end-placeholder`. Son placeholder's para las dos casillas de input en modo range #7169 + - Atributo `value-format` añadido para personalizar el formato del valor enlazado, #7367 + - Añadido el atributo `unlink-panels` para desacoplar los dos paneles de fechas al seleccionar un rango. +- MessageBox + - Añadido el atributo `closeOnHashChange` #6043 + - Atributo `center` agregado para que el contenido pueda ser centrado #7029 + - Añadido atributo `roundButton` para mostrar Botones redondeados #7029 + - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML* #6043 + - Añadido atributo `inputType` para asignar el tipo para el input interno, #7651 +- Dialog + - Añadidos los atributos `width`, `fullscreen`, `append-to-body`. Ahora Dialog puede ser anidado + - Atributo `center` agregado para que el contenido pueda ser centrado #7042 + - Añadidos `focus-after-closed`, `focus-after-open` para mejorar la accesibilidad #6511 +- ColorPicker + - Ahora puede escribir colores en el input #6167 + - Añadidos atributos `size` y `disabled` #7026 + - Añadido atributo `popper-class` #7351 +- Message + - Ahora el color de los iconos puede ser sustituido por CSS #6207 + - Añadido atributo `dangerouslyUseHTMLString`. Cuando está configurado en true, el mensaje será analizado como cadena HTML* #6207 + - Atributo `center` agregado para que el contenido pueda ser centrado #6875 +- Notification + - Añadido atributo `position` para configurar donde aparece Notification #6231 + - Añadido atributo `dangerouslyUseHTMLString` . Cuando está configurado en true, el mensaje será analizado como cadena HTML* #6231 + - Añadido el atributo `showClose` para ocultar el botón de cierre #6402 +- Rate + - Añadido el atributo `show-score` para determinar si la puntuación actual se muestra #6295 +- Tabs + - Añadido el atributo `tab-position` #6096 +- Radio + - Añadidos los atributos `border` y `size` #6690 +- Checkbox + - Añadidos los atributos `border` y `size` #6690 +- Alert + - Atributo `center` agregado para que el contenido pueda ser centrado #6876 +- Menu + - Añadidos los atributos `background-color`, `text-color` y `active-text-color` #7064 + - Añadidos los methods `open` and `close` para abrir y cerrar los SubMenu con programación, #7412 +- Form + - Añadido el atributo `inline-message` para determinar si el mensaje de validación se muestra inline #7032 + - Añadido el atributo `status-icon` para mostrar un icono de retroalimentación cuando se valida #7032 + - Form y FormItem ahora tienen un atributo `size`. Los componentes internos heredarán este tamaño si no se especifica en ellos mismos, #7428 + - Método `validate` devolverá ahora una promesa si se omite la llamada de retorno, #7405 + - Añadido método `clearValidate` para limpiar los resultados de las validaciones de todos los form items, #7623 +- Input + - Añadido slots con nombres `suffix` y `prefix` y atributos `suffixIcon` y `prefixIcon` para añadir contenido dentro del input #7032 +- Breadcrumb + - Añadido el atributo `separator-class` para dar soporte a los iconos como separadores de items #7203 +- Steps + - Añadido atributo `simple` para activar Steps de estilo sencillo #7274 +- Pagination + - Añadidos los atributos `prev-text` y `next-text` para personalizar los textos de la página anterior y de la página siguiente #7005 +- Loading + - Ahora usted puede personalizar el ícono del spinner y el color de fondo con los props `spinner` y `background` , #7390 +- Autocomplete + - Añadido atributo `debounce`, #7413 +- Upload + - Añadidos los atributos `limit` and `on-exceed` para limitar la cantidad de archivos, #7405 +- DateTimePicker + - Añadido el atributo `time-arrow-control` para activar `arrow-control` del TimePicker anidado, #7438 +- Layout + - Añadido un nuevo breakpoint `xl` para viewport más ancho que 1920px +- Table + - Añadido el atributo `span-method` para combinar celdas + - Añadido el método `clearSort` para borrar la clasificación programáticamente + - Añadido el método `clearFilter` para limpiar el filtro de forma programática + - Para las filas ampliables, cuando se amplía una fila, se añadirá una clase `.expanded` a su lista de clases, para que pueda personalizar su estilo. + - Atributo de `size` añadido + - Añadido el método `toggleRowExpansion` para expandir o contraer filas expandibles programáticamente. + - Añadido el atributo `cell-class-name` para asignar el nombre de la clase para las celdas + - Añadido atributo `cell-style` para dar estilo a las celdas + - Añadido atributo `header-row-class-name` para asignar el nombre de clase para las filas de encabezado. + - Añadido un atributo `header-row-style` para el estilo de encabezado + - Añadido el atributo `header-cell-class-name` para asignar el nombre de la clase para las celdas de encabezado. + - Añadido el atributo `header-cell-style` a las celdas de encabezado de estilo + - El atributo prop de TableColumn ahora acepta las notaciones `object[key]` + - Atributo de `index` añadido para TableColumn para personalizar índices de filas +- Select + - Añadido el atributo `reserve-keyword` para reservar la palabra clave de búsqueda actual después de seleccionar una opción. + +#### Bug fixes + +- DatePicker + - Arreglado `v-model` que devolvia el segundo día de la semana seleccionada en modo week #6038 + - Arreglado el primer input comenzaba borrado con el type `daterange` #6021 +- DateTimePicker + - Arreglado DateTimePicker y TimePicker que se afectaban entre sí cuando se seleccionaban #6090 + - Arreglado la hora y el segundo podian estar más allá del límite al seleccionar el tiempo #6076 +- TimePicker + - Arreglado `v-model` que no se actualizaba correctamente cuando no tenia el foco #6023 +- Dialog + - Arreglado textos que tenian bordes borrosos al abrir y cerrar dropdowns anidados #6088 +- Select + - Rendimiento mejorado. Ahora Vue dev-tool no se bloqueará cuando un gran número de Selects sean destruidos #6151 +- Table + - Corregido un bug de Table permanecía oculto cuando su elemento padre tenia el atributo `display: none` + - Arreglado Table ahora amplia su ancho cuando el elemento padre tiene `display: flex` + - Arreglado un bug que corregía las columnas de una tabla con slot con nombre `append` que desaparecia cuando los datos eran recuperados dinámicamente. + - Arreglado el atributo `expand-row-keys` que no funcionan con el valor inicial + - Fallo del filtro corregido al actualizar los datos + - Se ha corregido un error de cálculo de la disposición de columnas fijas con cabeceras agrupadas. + - Corregido un error de `max-height` dinámico + - Corregidos algunos errores de cálculo de estilo + +#### Breaking changes + +- General + - Eliminado `theme-default` + - Compatible con Vue 2.5.2+ e IE 10+ + - Evento `change` de componentes del formulario y evento `current-change` de Pagination ahora sólo se activa en la interacción del usuario. + - El atributo `size` del botón y los componentes del formulario aceptan ahora los tamaños `medium`, `small` y `mini`. + - Para facilitar el uso de iconos de terceros, los atributos `icon` de Button y Steps y los atributos `prefix-icon` y `suffix-icon` del input ahora requieren un nombre de clase completo. +- Dialog + - Atributo `size` eliminado. Ahora el tamaño de Dialog se puede configurar con `width` y `fullscreen` + - Ahora la visibilidad del Diálogo no puede ser controlada por `v-model` +- Rate + - `text-template` a sido renombrado a `score-template` +- Dropdown + - `menu-align` a sido renombrado a `placement`. Ahora soporta más posiciones +- Transfer + - `footer-format` a sido renombrado a `format` +- Switch + - Los atributos que comienzan con `on*` serán analizados en eventos en JSX, haciendo que todos los atributos `on*` de Switch no puedan trabajar en JSX. Por lo tanto, los atributos `on*` se renombran a `active-*`, y por consiguiente los atributos `off-*` se renombran a `inactivado-*`. Este cambio afecta a los siguientes atributos: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`. + - Los atributos `active-text` y `inactive-text` ahora no tienen valores por defecto. +- Tag + - El atributo type acepta ahora `success`, `info`, `warning` y `danger` +- Menu + - Atributo `theme` eliminado. El color de Menu se puede configurar utilizando `background-color`, `text-color` y `active-text-color` +- Input + - Atributo `icon` eliminado. Ahora el icono del sufijo puede configurarse usando el atributo `suffix-icon` o el slot con nombre `suffix`. + - Eliminado el atributo `on-icon-click` y el evento `click`. Ahora para añadir el manejador de clics en los iconos, por favor use los slots con nombre. + - El evento `change` se comporta ahora como el nativo, que se activa sólo en la perdida del foco o presionando enter. Si necesita responder a las entradas de usuario en tiempo real, puede utilizar el evento `input`. +- Autocomplete + - Atributo `custom-item` eliminado. Ahora la plantilla de sugerencias del input se puede personalizar utilizando `scoped slot` + - Atributo `props` eliminado. Ahora puede utilizar el atributo `value-key` para designar el nombre de la clave del objeto de sugerencia del input para su visualización. +- Steps + - Atributo `center` eliminado + - Ahora Steps llenara su contenedor padre por defecto +- DatePicker + - Los parámetros del evento `change` de DatePicker son ahora el valor vinculante en sí mismo. Su formato es controlado por `value-format` +- Table + - Soporte eliminado para personalizar la plantilla de columnas mediante `inline-template` + - `sort-method` ahora se alinea con `Array.sort`. Debería devolver un número en lugar de un booleano + - El slot `append` se desplazo fuera del elemento `tbody` para evitar múltiples renderizados. + - Evento `expand` se renombro a `expand-change` + - Los parametros de los métodos `row-class-name` y `row-style` son ahora un objeto + +# # + +* El procesamiento dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está encendido, por favor asegúrese de que el contenido de `message` es confiable, y **nunca** asigne el `message` al contenido proporcionado por el usuario. \ No newline at end of file diff --git a/build/bin/new-lang.js b/build/bin/new-lang.js index 7984509eb..ca93c2994 100644 --- a/build/bin/new-lang.js +++ b/build/bin/new-lang.js @@ -22,7 +22,7 @@ if (componentFile.some(item => item.lang === lang)) { console.error(`${lang} already exists.`); process.exit(1); } -let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-us')[0], { lang }); +let componentNew = Object.assign({}, componentFile.filter(item => item.lang === 'en-US')[0], { lang }); componentFile.push(componentNew); fileSave(path.join(__dirname, '../../examples/i18n/component.json')) .write(JSON.stringify(componentFile, null, ' '), 'utf8') @@ -30,7 +30,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/component.json')) // 添加到 page.json const pageFile = require('../../examples/i18n/page.json'); -let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-us')[0], { lang }); +let pageNew = Object.assign({}, pageFile.filter(item => item.lang === 'en-US')[0], { lang }); pageFile.push(pageNew); fileSave(path.join(__dirname, '../../examples/i18n/page.json')) .write(JSON.stringify(pageFile, null, ' '), 'utf8') @@ -45,7 +45,7 @@ fileSave(path.join(__dirname, '../../examples/i18n/route.json')) // 添加到 nav.config.json const navFile = require('../../examples/nav.config.json'); -navFile[lang] = navFile['en-us']; +navFile[lang] = navFile['en-US']; fileSave(path.join(__dirname, '../../examples/nav.config.json')) .write(JSON.stringify(navFile, null, ' '), 'utf8') .end('\n'); diff --git a/examples/app.vue b/examples/app.vue index 251988d38..035034755 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -187,7 +187,22 @@ import { use } from 'main/locale'; import zhLocale from 'main/locale/lang/zh-CN'; import enLocale from 'main/locale/lang/en'; - use(location.href.indexOf('zh-CN') > -1 ? zhLocale : enLocale); + import esLocale from 'main/locale/lang/es'; + + const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN'; + const localize = lang => { + switch (lang) { + case 'zh-CN': + use(zhLocale); + break; + case 'es': + use(esLocale); + break; + default: + use(enLocale); + } + }; + localize(lang); export default { name: 'app', @@ -206,14 +221,11 @@ if (val === 'zh-CN') { this.suggestJump(); } - this.localize(); + localize(val); } }, methods: { - localize() { - use(this.lang === 'zh-CN' ? zhLocale : enLocale); - }, suggestJump() { const href = location.href; const preferGithub = localStorage.getItem('PREFER_GITHUB'); @@ -232,8 +244,10 @@ }, mounted() { - this.localize(); - this.suggestJump(); + localize(this.lang); + if (this.lang === 'zh-CN') { + this.suggestJump(); + } setTimeout(() => { const notified = localStorage.getItem('ES_NOTIFIED'); if (!notified && this.lang !== 'zh-CN') { diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md new file mode 100644 index 000000000..5708dfac8 --- /dev/null +++ b/examples/docs/es/alert.md @@ -0,0 +1,225 @@ + + + +## Alert + +Mostrar mensajes de alertas importantes. + +### Uso básico + +Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente. + +::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`. + +```html + +``` +::: + +### Personalización del botón de cerrar + +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 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 + + + +``` +::: + +### Usar iconos + +Mostrar un icono mejora la legibilidad. + +::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando. + + +```html + +``` +::: + +### Texto centrado + +Para centrar el texto utilice el atributo `center`. + +::: demo + +```html + +``` +::: + +### Con descripción + +Descripción incluye un mensaje con información más detallada. + +::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente. + +```html + +``` +::: + +### Utilizando icono y descripción + +::: demo Finalmente este es un ejemplo utilizando icono y descripción. + +```html + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------- | ---------------------------------------- | ------- | -------------------------- | ----------- | +| title | título. Requerido | string | — | — | +| type | tipo de componente | string | success/warning/info/error | info | +| description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — | +| closable | si se puede cerrar o no | boolean | — | true | +| center | si el texto debe estar centrado | boolean | — | false | +| close-text | texto de cerrado personalizado | string | — | — | +| show-icon | si un icono del tipo de alerta se debe mostrar | boolean | — | false | + + +### Eventos +| Nombre del evento | Descripción | Parámetros | +| ----------------- | ------------------------------------- | ---------- | +| close | Se dispara cuando la alerta se cierra | — | diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md new file mode 100644 index 000000000..7a773f281 --- /dev/null +++ b/examples/docs/es/badge.md @@ -0,0 +1,138 @@ +## Badge + +Marcas en forma de número o estado para botones e iconos. + +### Uso básico + +Muestra la cantidad de mensajes nuevos. + +:::demo La cantidad está definida por `value` que acepta `Number` o `String`. + +```html + + comments + + + replies + + + + + Click Me + + + + comments + + + + replies + + + + + + +``` +::: + +### Valor máximo + +Se puede personalizar el valor máximo. + +::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`. + +```html + + comments + + + replies + + + +``` +::: + +### Personalizaciones + +Mostrar texto en vez de números. + +:::demo Cuando `value` es un `String`, puede mostrar texto personalizado. + +```html + + comments + + + replies + + + +``` +::: + +### Pequeño punto rojo + +Puede utilizar un punto rojo para marcar contenido que debe ser notado. + +:::demo Use el atributo `is-dot`. Es un `Boolean`. + +```html +query + + + + + +``` +::: + + + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | -------------- | ----------------- | ----------- | +| value | valor a mostrar | string, number | — | — | +| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — | +| is-dot | si se debe mostrar un pequeño punto | boolean | — | false | +| hidden | hidden badge | boolean | — | false | diff --git a/examples/docs/es/breadcrumb.md b/examples/docs/es/breadcrumb.md new file mode 100644 index 000000000..7b4026acb --- /dev/null +++ b/examples/docs/es/breadcrumb.md @@ -0,0 +1,49 @@ +## Breadcrumb + +Muestra la localización de la página actual, haciendo más fácil el poder ir a la página anterior. + +### Uso básico + + +:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'. + +```html + + homepage + promotion management + promotion list + promotion detail + +``` +::: + +### Icono separador + +:::demo Setee `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator` + +```html + + homepage + promotion management + promotion list + promotion detail + +``` +::: + +### Breadcrumb atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------------- | -------------------------------------- | ------ | ----------------- | ----------- | +| separator | caracter separador | string | — | / | +| separator-class | nombre de la clase del icono separador | string | — | - | + +### Breadcrumb Item atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ------------- | ----------------- | ----------- | +| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — | +| replace | si `true`, la navegación no dejara una entrada en la historia | boolean | — | false | + + + + + diff --git a/examples/docs/es/button.md b/examples/docs/es/button.md new file mode 100644 index 000000000..6130610ec --- /dev/null +++ b/examples/docs/es/button.md @@ -0,0 +1,177 @@ + + +## Button + +Botones comúnmente usados. + +### Uso básico + +::: demo Use `type`, `plain` y `round` para definir estilos a los botones. + +```html +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
+ +
+ Round + Primary + Success + Info + Warning + Danger +
+``` +::: + +### Botón deshabilitado + +El atributo `disabled` determina su un botón esta deshabilitado. + +:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`. + +```html +
+ Default + Primary + Success + Info + Warning + Danger +
+ +
+ Plain + Primary + Success + Info + Warning + Danger +
+``` +::: + +### Botón de texto + +Botones sin borde ni fondo. + +:::demo +```html +Text Button +Text Button +``` +::: + +### Botón icono + +Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto. + +:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag ``. También se pueden usar iconos custom. + +```html + + + +Search +Upload +``` +::: + +### Grupo de botones + +Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares. + +:::demo Use el tag `` para agrupar sus botones. + +```html + + Previous Page + Next Page + + + + + + +``` +::: + +### Botón de descarga + +Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga. + +:::demo Ajuste el atributo `loading` a `true` para mostrar el estado de descarga. + +```html +Loading +``` +::: + +### Tamaños + +Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios. + +:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`. + +```html +
+ Default + Medium + Small + Mini +
+
+ Default + Medium + Small + Mini +
+``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- | +| size | tamaño del botón | string | medium / small / mini | — | +| type | tipo de botón | string | primary / success / warning / danger / info / text | — | +| plain | determinar si es o no un botón plano | boolean | — | false | +| round | determinar si es o no un botón redondo | boolean | — | false | +| loading | determinar si es o no un botón de descarga | boolean | — | false | +| disabled | deshabilitar el botón | boolean | — | false | +| icon | nombre de la clase del icono | string | — | — | +| autofocus | misma funcionalidad que la nativa `autofocus` | boolean | — | false | +| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button | \ No newline at end of file diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md new file mode 100644 index 000000000..a3766f62b --- /dev/null +++ b/examples/docs/es/card.md @@ -0,0 +1,192 @@ + + + +## Card +Muestra información dentro de un contenedor `card` + +### Uso Basico + +`Card` incluye titulo, contenido y operaciones. + +:::demo Card se compone de cabecera y cuerpo. La cabecera es opcional y la colocación de su contenido depende de un slot con nombre. + +```html + +
+ Card name + Operation button +
+
+ {{'List item ' + o }} +
+ + + +``` +::: + +### Card simple + +La parte de la cabecera puede omitirse. + +:::demo +```html + +
+ {{'List item ' + o }} +
+ + + +``` +::: + +### Con imágenes + +Muestre un contenido más rico añadiendo algunas configuraciones. + +:::demo El atributo `body-style` define el estilo CSS del `body` personalizado. Este ejemplo también utiliza `el-col` para el layout. + +```html + + + + +
+ Yummy hamburger +
+ + Operating button +
+
+ + + + + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- | +| header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — | +| body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } | diff --git a/examples/docs/es/carousel.md b/examples/docs/es/carousel.md new file mode 100644 index 000000000..ecd67154d --- /dev/null +++ b/examples/docs/es/carousel.md @@ -0,0 +1,244 @@ + + +## Carousel + +Presenta una serie de imágenes o textos en un espacio limitado + +### Uso básico + +::: 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 + + + +``` +::: + +### Indicadores + +Los indicadores de paginacion pueden mostrarse fuera del carrusel + +::: demo El atributo `indicator-position` determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position` a `outside` los mueve hacia fuera; en cambio `indicator-position` a `none` los oculta. + +```html + + + +``` +::: + +### Flechas + +Puede definir cuando se visualizan las flechas + +::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente. + +```html + + + +``` +::: + +### Modo Card + +Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel. + +::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta. + +```html + + + +``` +::: + +### Atributos de Carousel +| Atributo | Descripcion | Tipo | Valores aceptados | Por defecto | +| ------------------ | ---------------------------------------- | ------- | ------------------ | ----------- | +| height | Alto del carrusel | string | — | — | +| initial-index | Indice del slider inicial activo (empieza desde 0) | number | — | 0 | +| trigger | Evento que muestra los indicadores | string | hover/click | hover | +| autoplay | Si se enlazan automáticamente las diapositivas | boolean | — | true | +| interval | Intervalo del auto loop, en milisegundos | number | — | 3000 | +| indicator-position | Posición del indicador de paginación | string | outside/none | — | +| arrow | Cuando se muestran las flechas | string | always/hover/never | hover | +| type | Tipo de carrusel | string | card | — | + +### Eventos de Carousel +| Nombre evento | Descripción | Parametros | +| ------------- | ---------------------------------------- | ---------------------------------------- | +| change | Se dispara cuando el slider activo cambia | Indice del nuevo slider activo, indice del anterior slider activo. | + +### Metodos de Carousel +| Metodos | Descripción | Parametros | +| ------------- | -------------------------- | ---------------------------------------- | +| setActiveItem | Cambio manual de slider | indice del slider al que se va a cambiar, empezando por 0; o el `name` del `el-carousel-item` correspondiente | +| prev | Cambia al slider anterior | — | +| next | Cambia al slider siguiente | — | + +### Atributos de Carousel-Item +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ------ | ----------------- | ----------- | +| name | Nombre del item que puede ser usado en `setActiveItem` | string | — | — | +| label | Texto que se mostrara en el indicador de paginacion correspondiente | string | — | — | + diff --git a/examples/docs/es/cascader.md b/examples/docs/es/cascader.md new file mode 100644 index 000000000..c56607976 --- /dev/null +++ b/examples/docs/es/cascader.md @@ -0,0 +1,1703 @@ + + + + +## Cascader + +Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas. + +### Uso básico + +Existen dos maneras de expandir los elementos hijo de la opción. + +:::demo Al asignar al atributo `options` un array de opciones, se genera un Cascader. El atributo `expand-trigger` define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento `change` , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado. + +```html +
+ Child options expand when clicked (default) + + +
+
+ Child options expand when hovered + + +
+ + +``` +::: + +### Opcion Disabled + +Para desactivar una opción configure un campo `disabled` en el objeto de opción. + +:::demo En este ejemplo, el primer elemento del array `options` tiene un campo `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera. + +```html + + +``` +::: + +### Mostrar sólo el último nivel + +Puede mostrar sólo el último nivel en lugar de todos los niveles. + +:::demo El atributo `show-all-levels` define si se visualizan todos los niveles. Si es `false`, sólo se muestra el último nivel. + +```html + + +``` +::: + +### Con valor por defecto + +:::demo El valor por defecto se puede definir con un array. +```html + + +``` +::: + +### Change on select + +También se pueden seleccionar las opciones del elemento padre. + +:::demo Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar `change-on-select` a `true`, también se pueden seleccionar opciones en los niveles superiores. + +```html + + +``` +::: + +### Carga dinamica de elementos hijos + +Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el. + +:::demo En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento `active-item-change`, puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los`props`. + +```html + + + +``` +::: + +### Filtrable + +Buscar y seleccionar opciones con una palabra clave. + +:::demo Añadir `filterable` a `el-cascader` permite filtrar + +```html +
+ Only options of the last level can be selected + +
+
+ Options of all levels can be selected + +
+ + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Opciones | Por defecto | +| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- | +| options | datos de las opciones | array | — | — | +| props | opciones de configuracion, mire la tabla siguiente | object | — | — | +| value | valor seleccionado | array | — | — | +| popper-class | nombre de clase para el Cascader's dropdown | string | — | — | +| placeholder | input placeholder | string | — | Select | +| disabled | si Cascader esta disabled | boolean | — | false | +| clearable | si se puede borrar el valor seleccionado | boolean | — | false | +| expand-trigger | evento del elemento actual para expandirse. | string | click / hover | click | +| show-all-levels | si mostrar todos los niveles del valor seleccionado en la entrada | boolean | — | true | +| filterable | si se pueden buscar las opciones | boolean | — | — | +| debounce | retardo al escribir la palabra clave del filtro, en milisegundos | number | — | 300 | +| change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean | — | false | +| size | tamaño del input | string | medium / small / mini | — | +| before-filter | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | — | — | + +### props +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ------ | ----------------- | ----------- | +| label | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | — | — | +| value | especifica qué clave del elemento de la opción se utiliza como valor | string | — | — | +| children | especifica qué clave del elemento de la opción se utiliza como hijo | string | — | — | +| disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | — | — | + +### Eventos +| Nombre | Descripción | Parametros | +| ------------------ | ---------------------------------------- | ------------------------- | +| change | se dispara cuando el valor cambia | valor | +| active-item-change | se dispara cuando cambia la opción activa, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas | + diff --git a/examples/docs/es/checkbox.md b/examples/docs/es/checkbox.md new file mode 100644 index 000000000..8d7c6709c --- /dev/null +++ b/examples/docs/es/checkbox.md @@ -0,0 +1,327 @@ + + +## Checkbox + +Un grupo de opciones para manejar múltiples elecciones. + +### Uso básico + +Checkbox puede ser usado para alternar entre dos estados. + +:::demo Define `v-model`(enlaza la variable) en `el-checkbox`. El valor por defecto es un `Boolean` para un `checkbox`, y se convierte en `true` cuando este es seleccionado. El contenido dentro del tag `el-checkbox` se convierte en la descripción al costado del botón del checkbox. + +```html + + +``` +::: + +### Estado Deshabilitado + +Estado deshabilitado para el checkbox. + +::: demo Setear el atributo `disabled`. + +```html + + +``` +::: + +### Grupo de Checkboxes + +Es usado por multiples checkboxes los cuales están enlazados a un grupo, indica si una opción está seleccionada verificando si esta está marcada. + +:::demo El elemento `checkbox-group` puede manejar multiples checkboxes en un grupo usando `v-model` el cuál está enlazado a un `Array`. Dentro del elemento `el-checkbox`, `label` es el valor del checkbox. Si en ese tag no hay contenido anidado, `label` va a ser mostrado como la descripción al lado del botón del checkbox. `label` también se corresponde con los valores del array. Es seleccionado si el valor especificado existe en el array y viceversa. + +```html + + + +``` +::: + +### Indeterminado + +La propiedad `indeterminate` puede ser usada para generar el efecto de marcar todos (check all). + +:::demo + +```html + + +``` +::: + +### Cantidad Mínima / Máxima de elementos seleccionados + +Las propiedades `min` y `max` pueden limitar la cantidad de elementos seleccionados. + +:::demo + +```html + + +``` +::: + +### Estilo tipo Botón + +Checkbox con estilo tipo Botón. + +:::demo Sólo debe cambiar el elemento `el-checkbox` por el elemento `el-checkbox-button`. También proveemos el atributo `size`. +```html + + +``` +::: + +### Con bordes + +:::demo El atributo `border` agrega un borde a los Checkboxes. +```html + + + +``` +::: + +### Atributos de Checkbox +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------- | ---------------------------------------- | ------------------------- | --------------------- | ----------- | +| label | valor del Checkbox si es usado dentro de un tag `checkbox-group` | string / number / boolean | — | — | +| true-label | valor del Checkbox si está marcado | string / number | — | — | +| false-label | valor del Checkbox si no está marcado | string / number | — | — | +| disabled | especifica si el Checkbox está deshabilitado | boolean | — | false | +| border | especifica si agrega un borde alrededor del Checkbox | boolean | — | false | +| size | tamaño del Checkbox, sólo funciona si `border` es true | string | medium / small / mini | — | +| name | atributo 'name' nativo | string | — | — | +| checked | especifica si el Checkbox está marcado | boolean | — | false | +| indeterminate | similar a `indeterminate` en el checkbox nativo | boolean | — | false | + +### Eventos de Checkbox +| Nombre | Descripción | Parametros | +| ------ | ---------------------------------------- | -------------------- | +| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | + +### Atributos de Checkbox-group +| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto | +| ---------- | ---------------------------------------- | ------- | --------------------- | ----------- | +| size | tamaño de los checkboxes de tipo botón o los checkboxes con border | string | medium / small / mini | — | +| disabled | especifica si los checkboxes anidados están deshabilitados | boolean | — | false | +| min | cantidad mínima de checkboxes que deben ser marcados | number | — | — | +| max | cantidad máxima de checkboxes que pueden ser marcados | number | — | — | +| text-color | color de fuente cuando el botón está activo | string | — | #ffffff | +| fill | color de border y de fondo cuando el botón está activo | string | — | #409EFF | + +### Eventos de Checkbox-group +| Nombre de Evento | Descripción | Parametros | +| ---------------- | ---------------------------------------- | -------------------- | +| change | se ejecuta cuando el valor enlazado cambia | el valor actualizado | + +### Atributos de Checkbox-button +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- | +| label | valor del checkbox cuando es usado dentro de un `checkbox-group` | string / number / boolean | — | — | +| true-label | valor del checkbox si este está marcado | string / number | — | — | +| false-label | valor del checkbox si este no está marcado | string / number | — | — | +| disabled | especifica si el checkbox está deshabilitado | boolean | — | false | +| name | atributo 'name' del checbox nativo | string | — | — | +| checked | si el checkbox está marcado | boolean | — | false | diff --git a/examples/docs/es/collapse.md b/examples/docs/es/collapse.md new file mode 100644 index 000000000..ff3d259e0 --- /dev/null +++ b/examples/docs/es/collapse.md @@ -0,0 +1,152 @@ + + + + +## Collapse + +Use Collapse para almacenar contenidos. + +### Uso básico + +Puede expandir varios paneles + +:::demo +```html + + +
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + + +``` +::: + +### Acordeón + +En modo acordeón sólo un panel puede ser expandido a la vez + +:::demo Activa el modo acordeón usado el atributo `accordion`. +```html + + +
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + + +``` +::: + +### Título personalizado + +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 + + + +
Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
+
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.
+ + +
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
+
Visual feedback: reflect current state by updating or rearranging elements of the page.
+ + +
Simplify the process: keep operating process simple and intuitive;
+
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
+
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
+ + +
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
+
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
+ + +``` +::: + +### Atributos de Collapse +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------- | ------------------------------------- | ---------------------------------------- | ----------------- | ----------- | +| accordion | especifica si activa el modo acordeón | boolean | — | false | +| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — | + +### Eventos de Collapse +| Nombre de Evento | Descripción | Parametros | +| ---------------- | ---------------------------------------- | ---------------------------------------- | +| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) | + + +### Atributos de Collapse Item +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ----------------------------- | ------------- | ----------------- | ----------- | +| name | identificador único del panel | string/number | — | — | +| title | título del panel | string | — | — | \ No newline at end of file diff --git a/examples/docs/es/color-picker.md b/examples/docs/es/color-picker.md new file mode 100644 index 000000000..040bb17a9 --- /dev/null +++ b/examples/docs/es/color-picker.md @@ -0,0 +1,126 @@ + + + + +## ColorPicker + +ColorPicker es un selector de color que soporta varios formatos de color. + +### Uso básico + +:::demo ColorPicker requiere una variable de tipo `string` para ser enlazada a `v-model`. +```html +
+ Especifica valor por defecto + +
+
+ No especifica valor por defecto + +
+ + +``` +::: + +### Alpha + +:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrege el atributo `show-alpha`. +```html + + + +``` +::: + +### Sizes + +:::demo +```html + + + + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------ | ---------------------------------------- | ------- | --------------------- | ---------------------------------------- | +| disabled | especifica si se deshabilita el ColorPicker | boolean | — | false | +| size | tamaño del ColorPicker | string | — | medium / small / mini | +| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false | +| color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) | +| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — | + +### Eventos +| Nombre de Evento | Descripción | Parametros | +| ---------------- | ---------------------------------------- | ---------------------- | +| change | se dispara cuando el valor del input cambia | valor del color | +| active-change | se dispara cuando el actual color activo cambia | valor del color activo | + diff --git a/examples/docs/es/color.md b/examples/docs/es/color.md new file mode 100644 index 000000000..95dd2ee85 --- /dev/null +++ b/examples/docs/es/color.md @@ -0,0 +1,128 @@ + + +## Color +Element utiliza un conjunto de paletas para especificar colores, y así, proporcionar una apariencia y sensación coherente para los productos que construye. + +### Color principal + +El color principal de Element es el azul brillante y amigable. + + + +
Azul
#409EFF
+ + + +### Color secundario + +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). + + + +
Éxito
#67C23A
+ + +
Precaución
#EB9E05
+ + +
Peligro
#FA5555
+ + +
Info
#878D99
+ + + +### Color neutro + +Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes colores neutrales para representar una estructura jeráquica. + + + +
+
Texto primario
#2D2F33
+
Texto regular
#5A5E66
+
Texto secundario
#878D99
+
Texto de placeholder
#B4BCCC
+
+ + +
+
Borde base
#D8DCE5
+
Borde ligero
#DFE4ED
+
Borde claro
#E6EBF5
+
Borde extra claro
#EDF2FC
+
+ + \ No newline at end of file diff --git a/examples/docs/es/container.md b/examples/docs/es/container.md new file mode 100644 index 000000000..77c06b4a9 --- /dev/null +++ b/examples/docs/es/container.md @@ -0,0 +1,300 @@ + + + + +## Contenedor +Componentes contenedores para iniciar una estructura básica de un sitio: + +``: Contenedor. Cuando este elemento se anida con un `` o ``, todos los elementos secundarios se organizan verticalmente. +De lo contrario, de forma horizontal. + +``: Contenedor para cabeceras. + +``: Contenedor para secciones laterales (generalmente, una barra lateral). + +``: Contenedor para sección principal. + +``: Contenedor para pie de página. + +:::tip +Estos componentes utilizan flex para el diseño, así que asegurese que el navegador lo soporta. Además, los elementos directos de `` tienen que ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un ``. +::: + +### Diseños comunes + +::: demo +```html + + Cabecera + Principal + + + + Cabecera + Principal + Pie de página + + + + Barra lateral + Principal + + + + Cabecera + + Barra lateral + Principal + + + + + Cabecera + + Barra lateral + + Principal + Pie de página + + + + + + Barra lateral + + Cabecera + Principal + + + + + Barra lateral + + Cabecera + Principal + Pie de página + + + + +``` +::: + +### Ejemplo + +::: demo +```html + + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + Option 1 + Option 2 + + + Option 3 + + + + Option 4-1 + + + + + + + + + + + View + Add + Delete + + + Tom + + + + + + + + + + + + + + + + + + +``` +::: + +### 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 | +| -------- | --------------------- | ------ | ----------------- | ----------- | +| height | altura de la cabecera | string | — | 60px | + +### Atributos de barra lateral +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ------------------------- | ------ | ----------------- | ----------- | +| width | ancho de la barra lateral | string | — | 300px | + +### Atributos de pie de página +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ------------------------ | ------ | ----------------- | ----------- | +| height | altura del pie de página | string | — | 60px | \ No newline at end of file diff --git a/examples/docs/es/custom-theme.md b/examples/docs/es/custom-theme.md new file mode 100644 index 000000000..1ca014ea9 --- /dev/null +++ b/examples/docs/es/custom-theme.md @@ -0,0 +1,122 @@ +## Tema personalizado +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 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, 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 su proyecto también utiliza SCSS, puede cambiar las variables de estilos de Element. Para ello, solo necesita crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`: + +```html +/* Color del tema */ +$--color-primary: teal; + +/* Ubicación de la fuente, obligatoria */ +$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts'; + +@import "../node_modules/element-ui/packages/theme-chalk/src/index"; +``` + +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' +import './element-variables.scss' + +Vue.use(Element) +``` + +:::tip +Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element. +::: + +### CLI para generar temas +Si su proyecto no utiliza SCSS, puede personalizar el tema a través de esta herramienta: + +#### Instalación +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, instale el tema `chalk` desde npm o Github. +```shell +# desde npm +npm i element-theme-chalk -D + +# desde GitHub +npm i https://github.com/ElementUI/theme-chalk -D +``` + +#### Inicializar archivo de variables +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] + +> ✔ Generator variables file +``` + +En el archivo `element-variables.scss` podrá encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo: +```css +$--color-primary: #409EFF !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ + +$--color-success: #67c23a !default; +$--color-warning: #eb9e05 !default; +$--color-danger: #fa5555 !default; +$--color-info: #878d99 !default; + +... +``` + +#### Modificando variables +Solo debe modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo: +```CSS +$--color-primary: red; +``` + +#### Construyendo el tema +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 + +> ✔ build theme font +> ✔ build element theme +``` + +#### Importar un tema personalizado +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' +import ElementUI from 'element-ui' +import Vue from 'vue' + +Vue.use(ElementUI) +``` + +#### Importar un tema de componente bajo demanda +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", [ + { + "libraryName": "element-ui", + "styleLibraryName": "~theme" + } + ]]] +} +``` + +Si no esta familiarizado con `babel-plugin-component`, por favor diríjase a la documentación sobre Como Iniciar. Para más detalles, consulte el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`. \ No newline at end of file diff --git a/examples/docs/es/date-picker.md b/examples/docs/es/date-picker.md new file mode 100644 index 000000000..0f90c7031 --- /dev/null +++ b/examples/docs/es/date-picker.md @@ -0,0 +1,428 @@ + + + + +## DatePicker + +Utilice Date Picker para introducir la fecha. + +### Ingresar Fecha + +Date Picker básico por "día". + +:::demo La medida está determinada por el atributo `type` . Puede habilitar las opciones rápidas creando un objeto `picker-options` con la propiedad `shortcuts`. La fecha desactivada se ajusta mediante `disabledDate`, que es una función. + + +```html + + + +``` + +::: + +### Otras mediciones + +Puede seleccionar la semana, el mes o el año extendiendo el componente date picker estándar. + +:::demo + +```html +
+ Week + + +
+
+ Month + + +
+
+ Year + + +
+ + +``` + +::: + +### Rango de fechas + +Se soporta la selección de un rango de fechas. + +:::demo En modo de rango, los paneles izquierdo y derecho están vinculados por defecto. Si desea que los dos paneles cambien los meses actuales de forma independiente, puede utilizar el atributo `unlink-panels`. + +```html + + + +``` + +::: + +### Valor por defecto + +Si el usuario no ha escogido una fecha, muestra el calendario de hoy por defecto. Puede utilizar `default-value` para fijar otra fecha. Su valor debe ser definido por `new Date()`. + +Si el tipo es `daterange`, `default-value` establece el calendario del lado izquierdo. + +:::demo +```html + + + +``` +::: + +### Formato del valor + +De forma predeterminada, DatePicker emite el objet `Date`. Puede utilizar `value-format` para designar el formato del valor emitido, acepta la misma cadena de formato del atributo `format`. + +:::warning +Esta característica está en la etapa alfa. Feedback bienvenido. + ::: + +:::demo +```html + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | ----------- | +| readonly | si DatePicker es solo de lectura | boolean | — | false | +| disabled | si DatePicker esta deshabilitado | boolean | — | false | +| size | tamaño del input | string | large/small/mini | — | +| editable | si el input es editable | boolean | — | true | +| clearable | si se muestra el boton de borrado | boolean | — | true | +| placeholder | placeholder cuando el modo NO es rango | string | — | — | +| start-placeholder | placeholder para la fecha de inicio en modo rango | string | — | — | +| end-placeholder | placeholder para la fecha final en modo rango | string | — | — | +| type | tipo de picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | +| format | formato en que se muestra el valor en el input | string | año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd | +| align | alineación | left/center/right | left | | +| popper-class | nombre de clase personalizada para el dropdown de DatePicker | string | — | — | +| picker-options | opciones adicionales, chequee la tabla debajo | object | — | {} | +| range-separator | separador de rangos | string | — | '-' | +| default-value | opcional, valor por defecto para el calendario | Date | cualquiera aceptado por `new Date()` | — | +| value-format | opcional, formato del valor enlazado. Si no esta especificado, el valor enlazado será un objeto Date. | string | año `yyyy`, mes `MM`, dia `dd`, hora `HH`, minuto `mm`, segundo `ss` | — | +| name | igual que `name` en el input nativo | string | — | — | +| unlink-panels | desvincular los dos paneles de fecha en el range-picker | boolean | — | false | + +### Opciones del Picker +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | ------------------------------ | ----------------- | ----------- | +| shortcuts | { text, onClick } un array de objetos para establecer opciones de acceso directo, verifique la tabla siguiente | object[] | — | — | +| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un valor booleano | function | — | — | +| firstDayOfWeek | primer dia de la semana | Number | 1 to 7 | 7 | +| onPick | una función que se dispara cuando se cambia la fecha seleccionada. Solamente para `daterange` y `datetimerange`. | Function({ maxDate, minDate }) | - | - | + +### Accesso directo +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | -------- | ----------------- | ----------- | +| text | título del acceso directo | string | — | — | +| onClick | una función se dispara al hacer clic en el acceso directo, con`vm`como parámetro. Puede modificar el valor del picker emitiendo el evento `pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — | + + +### Eventos +| Nombre | Descripción | Parametros | +| ------ | ---------------------------------------- | ---------------------------- | +| change | se dispara cuando el usuario confirma el valor | valor enlazado al componente | +| blur | se dispara cuando el input pierde el foco | (event: Event) | +| focus | se dispara cuando el input obtiene el foco | (event: Event) | + +### Metodos +| Metodo | Descripción | Parameteros | +| ------ | -------------------------- | ----------- | +| focus | coloca el foco en el input | — | + diff --git a/examples/docs/es/datetime-picker.md b/examples/docs/es/datetime-picker.md new file mode 100644 index 000000000..7a47631e1 --- /dev/null +++ b/examples/docs/es/datetime-picker.md @@ -0,0 +1,284 @@ + + + + +## DateTimePicker + +Seleccionar fecha y tiempo juntos en un picker. + +:::tip +DateTimePicker se deriva de DatePicker y TimePicker. Por una explicación más detallada sobre `pickerOptions` y otros atributos, puede referirse a DatePicker y TimePicker. +::: + +### Fecha y hora + +:::demo Puede seleccionar la fecha y la hora en un picker al mismo tiempo configurando el tipo de fecha y la hora. La forma de utilizar los atajos es la misma que con Date Picker. + + +```html + + + +``` +::: + +### Alcance de fecha y tiempo + +:::demo Puede seleccionar la fecha y el rango de tiempo ajustando `type` a `datetimerange`. + +```html + + + +``` +::: + +### Atributos +| Atributos | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | ----------- | +| readonly | si DatePicker es solo de lectura | boolean | — | false | +| disabled | si DatePicker esta deshabilitada | boolean | — | false | +| editable | Si la entrada es editable | boolean | — | true | +| clearable | Si mostrar el botón de `clear` | boolean | — | true | +| size | tamaño del input | string | large/small/mini | — | +| placeholder | placeholder cuando el modo NO es Range | string | — | — | +| start-placeholder | placeholder para el inicio de fecha en el modo Range | string | — | — | +| end-placeholder | placeholder para el fin de fecha en el modo Range | string | — | — | +| time-arrow-control | si se puede modificar el `time` utilizando botones con flechas | boolean | — | false | +| type | tipo del picker | string | year/month/date/datetime/ week/datetimerange/daterange | date | +| format | formato de valor mostrado en el input | string | año `yyyy` mes `MM` día `dd`, hora `HH`, minuto `mm`, segundo `ss` | yyyy-MM-dd | +| alinear | alineación | left/center/right | left | | +| popper-class | nombre de clase personalizado para el Dropdown de DatePicker | string | — | — | +| picker-options | opciones adicionales, Comprueba la tabla de mas abajo | object | — | {} | +| range-separator | separador de rango | string | - | '-' | +| default-value | opcional, fecha predeterminada del calendario | Fecha | cualquier cosa aceptada por `new Date()` — | | +| value-format | opcional, formato de valor de enlazado. Si no se especifica, el valor de enlazado será un objeto Date | cadena | año `yyyy`, mes `MM`, día `dd`, hora `HH`, minuto `mm`, segundo `ss` | — | +| name | igual que `name` en la entrada nativa | string | — | — | +| unlink-panels | desconectar dos date-panels en range-picker | boolean | — | false | + +### Picker Options +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | -------- | ----------------- | ----------- | +| shortcuts | un array de objetos { text, onClick } para establecer las opciones de acceso directo, verifique la tabla debajo | objeto[] | — | — | +| disabledDate | una función que determina si una fecha está desactivada con esa fecha como parámetro. Debería devolver un booleano | función | — | — | +| firstDayOfWeek | primera día de semana | Número | 1 to 7 | 7 | + +### Accesos directos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | -------- | ----------------- | ----------- | +| text | título del acceso directo | string | — | — | +| onClick | la funcion se dispara cuando se hace clic en el acceso directo, con el `vm` como parámetro. Puede modificar el valor del picker emitiendo el evento`pick`. Ejemplo: `vm.$emit('pick', new Date())` | function | — | — | + +### Eventos +| Nombre de evento | Descripción | Parámetros | +| ---------------- | ---------------------------------------- | ----------------------------- | +| change | Se dispara cuando el usuario confirma el valor | valor enlazado del componente | +| blur | Se dispara cuando el input pierde el foco | (event: Event) | +| focus | Se dispara cuando el input obtiene el foco | (event: Event) | + +### Métodos +| Método | Descripción | Parámetros | +| ------ | ---------------- | ---------- | +| focus | foco en el input | — | diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md new file mode 100644 index 000000000..224e0cab8 --- /dev/null +++ b/examples/docs/es/dialog.md @@ -0,0 +1,322 @@ + + + + +## Dialog + +Informar a usuarios preservando el estado de la página actual. + +### Uso Básico + +Dialog abre una caja de diálogo, y es bastante personalizable. + +:::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 +click to open the Dialog + + + This is a message + + Cancel + Confirm + + + + +``` +::: + +:::tip + +`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 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 + +```html + +open a Table nested Dialog + + + + + + + + + + +open a Form nested Dialog + + + + + + + + + + + + + + + Cancel + Confirm + + + + +``` +::: + +### Diálogo anidado +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 + + + +``` +::: + +::: + +### Contenido centrado +El contenido de Diálogo se puede centrar. + +:::demo Ajuste `center` en `true` para centrar el encabezado y el pie de página del cuadro de diálogo horizontalmente. + +```html +Click to open the Dialog + + + It should be noted that the content will not be aligned in center by default + + Cancel + Confirm + + + + +``` +::: + +:::tip +`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 la variable ligada a `visible` se gestiona en el Vuex store, el `.sync` no puede funcionar correctamente. En este caso, elimine el modificador `.sync`, escuche los eventos de `open` y `close` Dialog, y confirme las mutaciones Vuex para actualizar el valor de esa variable en los manejadores de eventos. + +::: + +### Atributo + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- | +| visible | visibilidad del Diálogo, apoya el modificador .sync | boolean | — | false | +| 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 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 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 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 | + +### Slots + +| Nombre | Descripcíon | +| ------ | -------------------------------------- | +| — | contenido de Diálogo | +| title | contenido del título de Diálogo | +| footer | contenido del pie de página de Diálogo | + +### Eventos +| Nombre de Evento | Descripcíon | Parámetros | +| ---------------- | ---------------------------------------- | ---------- | +| open | se activa cuando se abre el cuadro de Diálogo | — | +| close | se dispara cuando el Diálogo se cierra | — | diff --git a/examples/docs/es/dropdown.md b/examples/docs/es/dropdown.md new file mode 100644 index 000000000..e7ca4df22 --- /dev/null +++ b/examples/docs/es/dropdown.md @@ -0,0 +1,348 @@ + + + +## Dropdown +Menú conmutable para visualizar listas de enlaces y acciones. + +### Uso básico +Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones. + +:::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él. + +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + +``` + +::: + +### Elemento detonante + +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. + +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + Dropdown List + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Cómo detonar el evento + +Haga clic en el elemento detonante o sobre él. + +:::demo Utilice el atributo `trigger`. Por defecto, es `hover`. + +```html + + + hover to trigger + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + click to trigger + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Ocultamiento del menú + +Use `hide-on-click` para definir si el menú se cierra al hacer clic. + +:::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false. + +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + +``` +::: + +### Evento command + +Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento. + +:::demo +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + + + + +``` +::: + +### Tamaños + +Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios + +:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`. + +```html + + Default + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Medium + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Small + + Action 1 + Action 2 + Action 3 + Action 4 + + + + + Mini + + Action 1 + Action 2 + Action 3 + Action 4 + + +``` +::: + + +### Dropdown atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- | +| type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — | +| size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — | +| split-button | si se visualiza un grupo de botones | boolean | — | false | +| placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | +| trigger | cómo detonar | string | hover/click | hover | +| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true | +| show-timeout | Tiempo de retardo antes de mostrar un dropdown | number | — | 250 | +| hide-timeout | Tiempo de retardo antes de ocultar un dropdown | number | — | 150 | + +### Dropdown Eventos +| Nombre | Descripción | Parametros | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| click | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | — | +| command | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable | +| visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo | + +### Dropdown Menu Item Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- | +| command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — | +| disabled | si el elemento está desactivado | boolean | — | false | +| divided | si se visualiza un divisor | boolean | — | false | diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md new file mode 100644 index 000000000..d684cfb87 --- /dev/null +++ b/examples/docs/es/form.md @@ -0,0 +1,882 @@ + + + + +## Form + +Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos. + +### Form básico + +Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`. + +:::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item. + +```html + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + Create + Cancel + + + +``` +::: + +:::tip +[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que +> Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar Enter en ese campo como una solicitud para enviar el formulario. + +Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on ``. + ::: + +### Formulario inline + +Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea. + +:::demo Establezca el atributo `inline` como `true` y el formulario sera inline. + +```html + + + + + + + + + + + + Query + + + +``` +::: + +### Alineamiento + +Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta. + +:::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. + +```html + + Left + Right + Top + +
+ + + + + + + + + + + + +``` +::: + +### Validación + +El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores. + +:::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator). + +```html + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + Create + Reset + + + +``` +::: + +### Reglas personalizadas de validación + +Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos. + +:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono. + +```html + + + + + + + + + + + + Submit + Reset + + + +``` +::: + +### Eliminar o agregar validaciones dinamicamente + +:::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. + +```html + + + + + + Delete + + + Submit + New domain + Reset + + + +``` +::: + +### Validación numerica + +::: demo La validacion numerica 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. + +```html + + + + + + Submit + Reset + + + +``` +::: + +:::tip + +Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`. + +::: + +### Tamaño del control + +Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`. + +::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem. + +```html + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + Create + Cancel + + + + +``` +::: + +### Form Atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | ------- | --------------------- | ----------- | +| model | Datos del componente | object | — | — | +| rules | Reglas de validación | object | — | — | +| inline | Si el form es inline | boolean | — | false | +| label-position | Posicion de la etiqueta | string | left / right / top | right | +| label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — | +| label-suffix | sufijo de la etiqueta | string | — | — | +| show-message | si mostrar o no el mensaje de error | boolean | — | true | +| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false | +| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false | +| size | el tamaño de los componentes en este form | string | medium / small / mini | - | + +### Form Metodos + +| Metodo | Descripción | Parametros | +| ------------- | ---------------------------------------- | ---------------------------------------- | +| validate | el método para validar todo el formulario. Devuelve una promesa si se omite el return | Function(callback: Function(boolean)) | +| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) | +| resetFields | restablece todos los campos y elimina el resultado de validación | — | +| clearValidate | limpia mensaje de validación para todos los campos | - + +### Form-Item Atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | ------- | ----------------------------------- | ----------- | +| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | | +| label | etiqueta | string | — | — | +| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — | +| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string | — | false | +| rules | reglas de validacion del form | object | — | — | +| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — | +| show-message | si mostrar o no el mensaje de error | boolean | — | true | +| inline-message | mensaje de validación estilo inline | boolean | — | false | +| size | Tamaño de los componentes en este form item | string | medium / small / mini | - | + +### Form-Item Slot +| Nombre | Descripción | +| ------ | ------------------------ | +| — | contenido del Form Item | +| label | contenido de la etiqueta | + +### Form-Item Metodo + +| Metodo | Descripción | Parametros | +| ---------- | ---------------------------------------- | ---------- | +| resetField | restablecer campo actual y eliminar resultado de validación | — | diff --git a/examples/docs/es/i18n.md b/examples/docs/es/i18n.md new file mode 100644 index 000000000..7828be338 --- /dev/null +++ b/examples/docs/es/i18n.md @@ -0,0 +1,212 @@ +## Internacionalización + +El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo: + +```javascript +import Vue from 'vue' +import ElementUI from 'element-ui' +import locale from 'element-ui/lib/locale/lang/en' + +Vue.use(ElementUI, { locale }) +``` + +O si está importando Element a petición: + +```javascript +import Vue from 'vue' +import { Button, Select } from 'element-ui' +import lang from 'element-ui/lib/locale/lang/en' +import locale from 'element-ui/lib/locale' + +// configure language +locale.use(lang) + +// import components +Vue.component(Button.name, Button) +Vue.component(Select.name, Select) +``` + +El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada: + +webpack.config.js +```javascript +{ + plugins: [ + new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en') + ] +} +``` + +## Compatible con `vue-i18n@5.x` + +Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe. + +```javascript +import Vue from 'vue' +import VueI18n from 'vue-i18n' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) +Vue.use(Element) + +Vue.config.lang = 'zh-cn' +Vue.locale('zh-cn', zhLocale) +Vue.locale('en', enLocale) +``` + +## Compatible con otros plugins i18n +Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n. + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(Element, { + i18n: function (path, options) { + // ... + } +}) +``` + +## Compatible con `vue-i18n@6.x` + +Necesita manejarlo manualmente para ser compatible con `6.x`. + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import VueI18n from 'vue-i18n' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) + +const messages = { + en: { + message: 'hello', + ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)` + }, + zh: { + message: '你好', + ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)` + } +} +// Create VueI18n instance with options +const i18n = new VueI18n({ + locale: 'en', // set locale + messages, // set locale messages +}) + +Vue.use(Element, { + i18n: (key, value) => i18n.t(key, value) +}) + +new Vue({ i18n }).$mount('#app') +``` + +## Personalización de i18n en componentes bajo petición + +```js +import Vue from 'vue' +import DatePicker from 'element/lib/date-picker' +import VueI18n from 'vue-i18n' + +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' +import ElementLocale from 'element-ui/lib/locale' + +Vue.use(VueI18n) +Vue.use(DatePicker) + +const messages = { + en: { + message: 'hello', + ...enLocale + }, + zh: { + message: '你好', + ...zhLocale + } +} +// Create VueI18n instance with options +const i18n = new VueI18n({ + locale: 'en', // set locale + messages, // set locale messages +}) + +ElementLocale.i18n((key, value) => i18n.t(key, value)) +``` + +## Importar via CDN + +```html + + + + + +``` + +Compatible con `vue-i18n` + +```html + + + + + + + +``` + +Actualmente Element está disponible en los siguientes idiomas: +
    +
  • Simplified Chinese (zh-CN)
    • +
  • English (en)
    • +
  • German (de)
    • +
  • Portuguese (pt)
    • +
  • Spanish (es)
    • +
  • Danish (da)
    • +
  • French (fr)
    • +
  • Norwegian (nb-NO)
    • +
  • Traditional Chinese (zh-TW)
    • +
  • Italian (it)
    • +
  • Korean (ko)
    • +
  • Japanese (ja)
    • +
  • Dutch (nl)
    • +
  • Vietnamese (vi)
    • +
  • Russian (ru-RU)
    • +
  • Turkish (tr-TR)
    • +
  • Brazilian Portuguese (pt-br)
    • +
  • Farsi (fa)
    • +
  • Thai (th)
    • +
  • Indonesian (id)
    • +
  • Bulgarian (bg)
    • +
  • Polish (pl)
    • +
  • Finnish (fi)
    • +
  • Swedish (sv-SE)
    • +
  • Greek (el)
    • +
  • Slovak (sk)
    • +
  • Catalunya (ca)
    • +
  • Czech (cz)
    • +
  • Ukrainian (ua)
    • +
  • Turkmen (tk)
    • +
  • Tamil (ta)
    • +
  • Latvian (lv)
    • +
  • Afrikaans (af-ZA)
    • +
  • Estonian (ee)
    • +
  • Slovenian (sl)
    • +
  • Arabic (ar)
    • +
  • Hebrew (he)
    • +
+ +Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request. \ No newline at end of file diff --git a/examples/docs/es/icon.md b/examples/docs/es/icon.md new file mode 100644 index 000000000..1609c88c3 --- /dev/null +++ b/examples/docs/es/icon.md @@ -0,0 +1,96 @@ + + + + +## Icon + +Element proporciona un conjunto de iconos propios. + +### Uso básico + +Simplemente asigna el nombre de la clase a `el-icon-iconName`. + +:::demo + +```html + + + +Search + +``` +::: + +### Iconos + +
    +
  • + + + {{'el-icon-' + name}} + +
    • +
diff --git a/examples/docs/es/input-number.md b/examples/docs/es/input-number.md new file mode 100644 index 000000000..60a5d4778 --- /dev/null +++ b/examples/docs/es/input-number.md @@ -0,0 +1,181 @@ + + + + +## InputNumber + +Input de valores numéricos con un rango personalizable. + +### Uso básico + +:::demo Vincule una variable con `v-model` en el elemento y estará listo. + +```html + + +``` +::: + +### Disabled + +:::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`. + +```html + + +``` +::: + +### Steps + +Le permite definir el nivel de incremento de los saltos. + +:::demo Añada el atributo `step` para establecer el salto. + +```html + + +``` +::: + +### Tamaño + +Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`. + +:::demo + +```html + + +``` +::: + +### Posición de los controles + +:::demo Establezca `controls-position` para decidir la posición de los botones de control. + +```html + + +``` +::: + +### Atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- | +| value | valor vinculado | number | — | — | +| min | el valor mínimo permitido | number | — | 0 | +| max | el valor maximo permitido | number | — | `Infinity` | +| step | incremento (salto) | number | — | 1 | +| size | tamaño del componente | string | large/small | — | +| disabled | si el componente esta deshabilitado | boolean | — | false | +| controls | si se activan los botones de control | boolean | — | true | +| debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 | +| controls-position | posición de los botones de control | string | right | - | +| name | lo mismo que `name` en un input nativo | string | — | — | +| label | texto de la etiqueta | string | — | — | +### Eventos + +| Nombre | Descripción | Parámetros | +| ------ | ---------------------------------------- | ------------------ | +| change | se produce cuando el valor cambia | value after change | +| blur | se produce cuando el componente pierde el foco | (event: Event) | +| focus | se produce cuando el componente obtiene el foco | (event: Event) | + +### Métodos +| Método | Descripción | Parámetro | +| ------ | ------------------------------------ | --------- | +| focus | coloca el foco en el elemento actual | - | diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md new file mode 100644 index 000000000..5cbe9dda3 --- /dev/null +++ b/examples/docs/es/input.md @@ -0,0 +1,700 @@ + + + + +## Input + +Ingresa datos usando el ratón o teclado. + +### Uso básico + +::: demo + +```html + + + +``` +::: + +### Disabled + +::: demo Deshabilite el Input con el atributo `disabled`. + +```html + + + + +``` +::: + +### Input con icono + +Añada un icono para indicar el tipo de Input. + +::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan. + +```html +
+ Using attributes + + + + +
+
+ Using slots + + + + + + +
+ + + + +``` +::: + +### Textarea + +Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`. + +::: demo Controle la altura ajustando el prop `rows`. + +```html + + + + +``` +::: + +### Textarea tamaño automatico + +El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente. + +::: demo + +```html + + +
+ + + + +``` +::: + +### Mezclando elementos con input + +Añade un elemento antes o después del input, generalmente una etiqueta o un botón. + +::: demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input. + +```html +
+ + + +
+
+ + + +
+
+ + + + + + + + +
+ + + +``` +::: + +### Tamaño + +::: demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`. + +```html +
+ + + + + + + + +
+ + +``` +::: + +### Autocompletado + +Puede obtener algunas sugerencias basadas en la entrada actual. + +::: demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas. + +```html + + +
list suggestions when activated
+ + + +
list suggestions on input
+ + + + +``` +::: + +### Template personalizado + +Personalice cómo se muestran las sugerencias. + +:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`. + +```html + + + + + + + + + +``` +::: + +### Búsqueda remota + +Búsqueda de datos desde el servidor. + +::: demo +```html + + +``` +::: + +### Input atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- | +| type | tipo de input | string | text / textarea | text | +| value | valor enlazado | string / number | — | — | +| maxlength | el maximo para el largo del texto | number | — | — | +| minlength | el mínimo para el largo del texto | number | — | — | +| placeholder | placeholder del Input | string | — | — | +| disabled | si esta deshabilitado | boolean | — | false | +| size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — | +| prefix-icon | clase del icono de prefijo | string | — | — | +| suffix-icon | clase del icono de sufijo | string | — | — | +| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 | +| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false | +| auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off | +| name | igual que `name` en el input nativo | string | — | — | +| readonly | igual que `readonly` en el input nativo | boolean | — | false | +| max | igual que `max` en el input nativo | — | — | — | +| min | igual que `min` en el input nativo | — | — | — | +| step | igual que `step` en el input nativo | — | — | — | +| resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — | +| autofocus | igual que `autofocus` en el input nativo | boolean | — | false | +| form | igual que `form` en el input nativo | string | — | — | +| label | texto de la etiqueta | string | — | — | + +### Input slots + +| Nombre | Descripción | +| ------- | ------------------------------------ | +| prefix | contenido como prefijo del input | +| suffix | contenido como sufijo del input | +| prepend | contenido antes del input | +| append | contenido a añadir después del input | + +### Input eventos + +| Nombre | Descripción | Parametros | +| ------ | ---------------------------------------- | ------------------------- | +| blur | Se dispara cuando se pierde el foco | (event: Event) | +| focus | Se dispara cuando se obtiene el foco | (event: Event) | +| change | se activa cuando cambia el valor de entrada | (value: string \| number) | + +### Autocomplete Atributos + +Atributo | Descripción | Tipo | Opciones | Por defecto +|----| ----| ----| ---- | -----| +|placeholder| el placeholder del Autocomplete| string | — | — | +|disabled | si el Autocompete esta deshabilitado | boolean | — | false| +| valueKey | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value | +|icon | nombre del icono | string | — | — | +|value | valor enlazado | string | — | — | +| debounce | retardo al escribir, en milisegundos | number | — | 300 | +|fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — | +| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — | +| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true | +| on-icon-click | funcion que se invoca cuando se hace click en el icono | function | — | — | +| name | igual que `name` en el input nativo | string | — | — | +| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false | +| label | texto de la etiqueta | string | — | — | + +### Autocomplete slots + +| Nombre | Descripción | +| ------- | ------------------------------------ | +| prefix | contenido como prefijo del input | +| suffix | contenido como sufijo del input | +| prepend | contenido antes del input | +| append | contenido a añadir después del input | + +### Autocomplete Eventos + +| Nombre | Descripción | Parametros | +| ------ | ---------------------------------------- | ---------------------------------------- | +| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click | + +### Metodo +| Metodo | Descripción | Parametros | +| ------ | ----------------------------- | ---------- | +| focus | coloca el foco en el elemento | — | diff --git a/examples/docs/es/installation.md b/examples/docs/es/installation.md new file mode 100644 index 000000000..4e104f169 --- /dev/null +++ b/examples/docs/es/installation.md @@ -0,0 +1,58 @@ +## Instalación + +### npm +Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/). + +```shell +npm i element-ui -S +``` + +### CDN +Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página. + +```html + + + + +``` + +##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. + + +### Hello world +Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) + +```html + + + + + + + + +
+ Button + +

Try Element

+ +
+ + + + + + + +``` +Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start + diff --git a/examples/docs/es/layout.md b/examples/docs/es/layout.md new file mode 100644 index 000000000..904aed7ba --- /dev/null +++ b/examples/docs/es/layout.md @@ -0,0 +1,390 @@ + + +## Layout + +Rápido y facilmente crea un layout básico con 24 columnas. + +### Layout básico + +Crea un layout básico usando columnas. + +:::**Demo** Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`. +```html + +
+ + +
+
+ + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + + +``` +::: + +### Espaciado de columnas + +El espaciado de columnas está soportado. + +:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0. +```html + +
+
+
+
+ + + +``` +::: + +### Layout híbrido + +Crea un complejo layout híbrido combinando el básico de 1/24 columnas. + +:::**Demo** +```html + +
+
+ + +
+
+
+
+ + +
+
+
+ + + +``` +::: + +### Offset de columnas + +Puedes especificar offsets para las columnas. + +:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col. + +```html + +
+
+ + +
+
+ + +
+ + + +``` +::: + +### Alineación + +Usa flex layout para un alineamiento flexible de columnas. + +:::**Demo** Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around. +```html + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + + +``` +::: + +### Responsive Layout + +Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl. + +:::**Demo** +```html + +
+
+
+
+ + + +``` +::: + +### 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. 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 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 +- `hidden-lg-only` - ocultos en viewports grandes solamente +- `hidden-lg-and-down` - ocultos en viewports grandes y menores +- `hidden-lg-and-up` - ocultos en viewports grandes y superiores +- `hidden-xl-only` - oculto en viewports extra grandes solamente + +### Atributos Row + +| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | +| --------- | ---------------------------------------- | ------ | ---------------------------------------- | ----------------- | +| gutter | espaciado de la grilla | number | — | 0 | +| type | modo del layout , puedes usar flex, funciona en navegadores modernos | string | — | — | +| justify | alineación horizontal del layout flex | string | start/end/center/space-around/space-between | start | +| align | alineación vertical del layout flex | string | top/middle/bottom | top | +| tag | tag de elemento propio | string | * | div | + +### Atributos Col + +| Atributos | Descripción | Tipo | Valores aceptados | Valor por defecto | +| --------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------------- | +| span | número de columnas que abarca la cuadrícula | number | — | 24 | +| offset | especific espacio en el lado izquierdo de la grill | number | — | 0 | +| push | número de columnas que la grilla se mueve hacia la derecha | number | — | 0 | +| pull | número de columnas que la grilla se mueve hacia la izquierda | number | — | 0 | +| xs | `<768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| sm | `≥768px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| md | `≥992px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| lg | `≥1200px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| xl | `≥1920px` Columnas responsive u objeto con propiedades de la columna | number/object (e.g. {span: 4, offset: 4}) | — | — | +| tag | tag de elemento propio | string | * | div | + + diff --git a/examples/docs/es/loading.md b/examples/docs/es/loading.md new file mode 100644 index 000000000..542c9034b --- /dev/null +++ b/examples/docs/es/loading.md @@ -0,0 +1,260 @@ + + + + +## Cargando + +Se muestra la animación mientras se cargan los datos. + +### Cargando dentro de un contenedor + +Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos. + +:::demo Element provee dos maneras para invocar el componente de Cargando: por directiva y por servicio. Para la directiva personalizada `v-loading`, solo necesitas enlazarlo a un valor `Boolean`. Por defecto, la máscara de carga se agregará al elemento donde se usa la directiva. Al agregar el modificador `body`, la máscara se agrega al elemento body. + +```html + + + + + +``` +::: + +### Personalización + +Puede personalizar el texto de carga, spinner de carga y color de fondo. + +:::demo Agrege el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo. +```html + + + +``` +::: + +### Cargando a pantalla completa + +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 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 + + + +``` +::: + +### Servicio + +Puede invocar el componente con un servicio. Importe el servicio: + +```javascript +import { Loading } from 'element-ui'; +``` +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 puede cerrarlo invocando el método `close`: +```javascript +let loadingInstance = Loading.service(options); +loadingInstance.close(); +``` +Tenga en cuenta que, en este caso, el componente a pantalla completa es una instancia única. Si un nuevo componente de pantalla completa es invocado antes de que se cierre la existente, se devolverá la instancia existente en lugar de crear la otra instancia: +```javascript +let loadingInstance1 = Loading.service({ fullscreen: true }); +let loadingInstance2 = Loading.service({ fullscreen: true }); +console.log(loadingInstance1 === loadingInstance2); // true +``` +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. + +### 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 | +| lock | igual que el modificador `lock` de `v-loading` | boolean | — | false | +| text | texto de cargando que se muestra debajo del spinner | string | — | — | +| spinner | nombre de clase del spinner personalizado | string | — | — | +| background | color de fondo de la máscara | string | — | — | +| customClass | nombre de clase personalizada para el componente | string | — | — | \ No newline at end of file diff --git a/examples/docs/es/menu.md b/examples/docs/es/menu.md new file mode 100644 index 000000000..5b024a1d4 --- /dev/null +++ b/examples/docs/es/menu.md @@ -0,0 +1,320 @@ + + + + +## NavMenu + +Menú que provee la navegación para tu sitio. + +### Top bar + +Top bar NavMenu puede ser usado en distinto escenarios. + +:::**Demo** Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores. + +```html + + Processing Center + + + item one + item two + item three + + Orders + +
+ + Processing Center + + + item one + item two + item three + + Orders + + + +``` +::: + +### Side bar + +NavMenu vertical con sub-menús. + +:::**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 + + +
Default colors
+ + + + + item one + item one + + + item three + + + + item one + + + + + Navigator Two + + + + Navigator Three + + + + +
Custom colors
+ + + + + item one + item one + + + item three + + + + item one + + + + + Navigator Two + + + + Navigator Three + + + + + + +``` +::: + +### Collapse + +NavMenu vertical puede ser colapsado. + +:::**Demo** +```html + + expand + collapse + + + + + + Group One + item one + item two + + + item three + + + item four + item one + + + + + Navigator Two + + + + Navigator Three + + + + + + +``` +::: + +### Atributos Menu +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------------- | ---------------------------------------- | ------- | --------------------- | ----------- | +| mode | modo de presentación del menú | string | horizontal / vertical | vertical | +| collapse | si el menú está colapsado (solo en modo vertical) | boolean | — | false | +| background-color | color de fondo del menú (formato hexadecimal) | string | — | #ffffff | +| text-color | color de texto del menú (formato hexadecimal) | string | — | #2d2f33 | +| active-text-color | color de text del menu-item activo (formato hexadecimal) | string | — | #409EFF | +| default-active | índice del menu-item activo | string | — | — | +| default-openeds | arreglo que contiene las llaves del sub-menus activo | Array | — | — | +| unique-opened | si solo un submenu puede ser activo | boolean | — | false | +| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover | +| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false | + +### Métodos Menu +| Nombre de evento | Descripción | Parámetros | +| ---------------- | ----------------------------- | -------------------------------------- | +| open | abre un sub-menu específico | index: índice del sub-menu para abrir | +| close | cierra un sub-menu específico | index: índice del sub-menu para cerrar | + +### Eventos Menu +| Nombre de evento | Descripción | Parámetros | +| ---------------- | ---------------------------------------- | ---------------------------------------- | +| select | callback ejecutado cuando el menú es activado | index: índice del menú activado, indexPath: index path del menú activado | +| open | callback ejecutado cuando sub-menu se expande | index: índice del sub-menu expandido, indexPath: index path del sub-menu expandido | +| close | callback ejecutado cuando sub-menu colapsa | index: índice del sub-menu colapsado, indexPath: index path del menú colapsado | + +### Eventos Menu-Item +| Nombre de evento | Descripción | Parámetros | +| ---------------- | ---------------------------------------- | -------------------------- | +| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item | + +### Atributos SubMenu +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ------------------- | ------ | ----------------- | ----------- | +| index | identificador único | string | — | — | + +### Atributos Menu-Item +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ------------------- | ------ | ----------------- | ----------- | +| index | identificador único | string | — | — | +| route | Objeto Vue Router | object | — | — | + +### Atributos Menu-Group +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------- | ------ | ----------------- | ----------- | +| title | título del grupo | string | — | — | diff --git a/examples/docs/es/message-box.md b/examples/docs/es/message-box.md new file mode 100644 index 000000000..329f2f504 --- /dev/null +++ b/examples/docs/es/message-box.md @@ -0,0 +1,403 @@ + + +## MessageBox + +Un conjunto de cajas modales simulando un sistema de message box, principalmente para alertar informacion, confirmar operaciones y mostrar mensajes de aviso. +:::tip +Por diseño los message box nos proveen de simulaciones de sistemas como los componentes `alert`, `confirm` y `prompt`，entonces su contenido debería ser simple. para contenido mas complejo, por favor utilize el componente Dialog. +::: + +### Alert + +Alert interrumpe las operaciones realizadas hasta que el usuario confirme la alerta. + +:::demo Desplegar una alerta utilizando el metodo `$alert`. Simula el sistema `alert`, y no puede ser cerrado al presionar la tecla ESC o al dar click fuera de la caja. En este ejemplo, dos parametros son recibidos `message` y `title`. Vale la pena mencionar que cuando la caja es cerrada, regresa un objeto `Promise` para su procesamiento posteriormente. Si no estas seguro si el navegador soporta `Promise`, deberias importar una libreria de terceros de polyfill o utilizar callbacks. + +```html + + + +``` +::: + +### Confirm + +Confirm es utilizado para preguntar al usuario y recibir una confirmacion. + + +:::demo Llamando al metodo `$confirm` para abrir el componente confirm, y simula el sistema `confirm`. Tambien podemos personalizar a gran medida el componente Message Box al mandar un tercer atributo llamado `options` que es literalmente un objeto. El atributo `type` indica el tipo de mensaje, y su valor puede ser `success`, `error`, `info` y `warning`. Se debe tener en cuenta que el segundo atributo `title` debe ser de tipo `string`, y si es de tipo `object`, sera manejado como el atributo `options`. Aqui utilizamos `Promise` para manejar posteriormente el proceso. + +```html + + + +``` + +::: + +### Prompt + +Prompt es utilizado cuando se requiere entrada de informacion del usuario. + +:::demo Llamando al metodo `$prompt` desplegamos el componente prompt, y simula el sistema `prompt`.Puedes utilizar el parametro `inputPattern` para especificar tu propio patron RegExp. Utiliza el parametro `inputValidator` para especificar el metodo de validacion, y debería regresar un valor de tipo `Boolean` o `String`. Al regresar `false` o `String` significa que la validacion a fallado, y la cadena regresada se usara como `inputErrorMessage`. Ademas, puedes perzonalizar el atributo placeholder del input box con el parametro `inputPlaceholder`. + +```html + + + +``` +::: + +### Personalización + +Puede ser personalizado para mostrar diversos contenidos. + +:::demo Los tres metodos mencionados anteriormente son un rempaquetado del metodo `$msgbox`. En este ejemplo se realiza una llamada al metodo `$msgbox` directamente utilizando el atributo `showCancelButton`, el cual es utilizado para indicar si el boton cancelar es mostrado en pantalla. Ademas podemos utilizar el atributo `cancelButtonClass` para agregar un estilo personalizado y el atributo `cancelButtonText` para personalizar el texto del boton (el boton de confirmacion tambien cuenta con estos campos, y podra encontrar una lista completa de estos atributos al final de esta documentacion). Este ejemplo tambien utiliza el atributo `beforeClose`. Es un metodo que es disparado cuando una instancia del componente MessageBox es cerrada, y su ejecucion detendra el cierre de la instancia. Tiene tres parametros: `action`, `instance` y `done`. Al utilizarla te permite manipular la instancia antes de que sea cerrada, e.g. activando `loading` para el boton de confirmacion; puede invocar el metodo `done` para cerrar la instancia del componente MessageBox (si el metodo `done` no es llamado dentro del atributo `beforeClose`, la instancia no podra cerrarse). + +```html + + + +``` +::: + +### Utiliza cadenas HTML +`message` soporta cadenas HTML. + +:::demo Establezca el valor de `dangerouslyUseHTMLString` a true y `message` sera tratado como una cadena HTML. + +```html + + + +``` +::: + +:::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. +::: + +### Centered content +El contenido del componente MessageBox puede ser centrado. + +:::demo Establecer `center` a `true` centrara el contenido + +```html + + + +``` +::: + +### Metodos Globales + +Si Element fue importado completamente, agregara los siguientes metodos globales para Vue.prototype: `$msgbox`, `$alert`, `$confirm` y `$prompt`. Asi que en una instancia de Vue puedes llamar el metodo `MessageBox` como lo que hicimos en esta pagina. Los parametros son: +- `$msgbox(options)` +- `$alert(message, title, options)` or `$alert(message, options)` +- `$confirm(message, title, options)` or `$confirm(message, options)` +- `$prompt(message, title, options)` or `$prompt(message, options)` + +### Importación local + +Si prefieres importar `MessageBox` cuando lo necesites (on demand): + +```javascript +import { MessageBox } from 'element-ui'; +``` + +Los metodos correspondientes: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` y `MessageBox.prompt`. Los parametros son los mismos que los anteriores. + +### Opciones + +| Atributo | Descripción | Tipo | Valores Permitidos | Por defecto | +| ------------------------ | ---------------------------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------- | +| title | titulo del componente MessageBox | string | — | — | +| message | contenido del componente MessageBox | string | — | — | +| 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 | — | +| customClass | nombre de la clase personzalida para el componente MessageBox | string | — | — | +| callback | MessageBox callback al cerrar si no desea utilizar Promise | function(action), donde la accion puede ser 'confirm' o 'cancel', e `instance` es la instancia del componente MessageBox. Puedes acceder a los metodos y atributos de esa instancia | — | — | +| beforeClose | callback llamado antes de cerrar el componente MessageBox, y previene que el componente MessageBox se cierre | function(action, instance, done), donde `action` pueden ser 'confirm' o 'cancel'; `instance` es la instancia del componente MessageBox, Puedes acceder a los metodos y atributos de esa instancia; `done` es para cerrar la instancia | — | — | +| lockScroll | utilizado para bloquear el desplazamiento del contenido del MessageBox prompts | boolean | — | true | +| showCancelButton | utlizado para mostrar un boton cancelar | boolean | — | false (true cuando es llamado con confirm y prompt) | +| showConfirmButton | utlizado para mostrar un boton confirmar | boolean | — | true | +| cancelButtonText | contenido de texto del boton cancelar | string | — | Cancel | +| confirmButtonText | contenido de texto del boton confirmar | string | — | OK | +| cancelButtonClass | nombre de la clase personalizada del boton cancelar | string | — | — | +| confirmButtonClass | nombre de la clase personalizada del boton confirmar | string | — | — | +| closeOnClickModal | utilizado para que que el componenteMessageBox pueda ser cerrado al dar click en la mascara | boolean | — | true (false cuando es llamado con alert) | +| closeOnPressEscape | utilizado para que que el componenteMessageBox pueda ser cerrado al presionar la tecla ESC | boolean | — | true (false cuando es llamado con alert) | +| closeOnHashChange | utilizado para cerra el componente MessageBox cuando hash cambie | boolean | — | true | +| showInput | utilizado para mostrar el componente input | boolean | — | false (true cuando es llamado con prompt) | +| inputPlaceholder | placeholder para el componente input | string | — | — | +| inputType | tipo del componente input | string | — | text | +| inputValue | valor inicial del componente input | string | — | — | +| inputPattern | regexp del componente input | regexp | — | — | +| inputValidator | funcion de validacion del componente input. Debe regresar un valor de tipo boolean o string. Si regresa un valor tipo string, sera asignado a inputErrorMessage | function | — | — | +| inputErrorMessage | mensaje de error cuando la validacion falla | string | — | Illegal input | +| center | utilizado para alinear el contenido al centro | boolean | — | false | +| roundButton | utilizado para redondear el boton | boolean | — | false | diff --git a/examples/docs/es/message.md b/examples/docs/es/message.md new file mode 100644 index 000000000..cc389c160 --- /dev/null +++ b/examples/docs/es/message.md @@ -0,0 +1,302 @@ + + +## Message + +Utilizado para mostrar retroalimentacion despues de una actividad. La diferencia con el componente Notification es que este ultimo es utilizado para mostrar una notificacion pasiva a nivel de sistema. + +### Uso basico + +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 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 + + + +``` +::: + +### Tipos + +Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities. + +:::demo Cuando necesite mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, estableciendo el valor de `type` puede definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, hay registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`. +```html + + + +``` +::: + +### Closable + +Un boton para cerrar que puede ser agregado. + +:::demo Un componente Message predeterminado no se puede cerrar manualmente. Si necesitas un componente message que pueda cerrarse, puedes establecer el campo `showClose`. Ademas, al igual que las notificaciones, message tiene un atriubuto `duration` que puede ser controlado. Por defecto la duracion es de 3000 ms, y no desaparecera al llegar a `0`. +```html + + + +``` +::: + +### Centered text +Utiliza el atributo `center` para centrar el texto. + +:::demo + +```html + + + +``` +::: + +### Utiliza cadenas HTML +`message` soporta cadenas HTML. + +:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML. + +```html + + + +``` +::: + +:::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 puede llamar a `Message` como lo hicimos en esta pagina. + +### Importación local + +Import `Message`: + +```javascript +import { Message } from 'element-ui'; +``` + +En este caso deberia llamar al metodo `Message(options)`. Tambien se han registrado metodos para los diferentes tipos, e.g. `Message.success(options)`. +Puede llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias. + +### Options +| Atributo | Descripcion | Tipo | Valores permitidos | Por defecto | +| ------------------------ | ---------------------------------------- | -------------- | -------------------------- | ----------- | +| message | texto del mensaje | string / VNode | — | — | +| type | tipo del mensaje | string | success/warning/info/error | info | +| iconClass | clase personalizada para el icono, sobreescribe `type` | string | — | — | +| dangerouslyUseHTMLString | utilizado para que `message` sea tratado como cadena HTML | boolean | — | false | +| customClass | nombre de clase personalizado para el componente Message | string | — | — | +| duration | muestra la duracion,en milisegundos. si se establece en 0, este no se apagara automaticamente | number | — | 3000 | +| showClose | utilizado para mostrar un boton para cerrar | boolean | — | false | +| center | utilizado para centrar el texto | boolean | — | false | +| onClose | funcion callback ejecutada cuando se cierra con una instancia de mensaje como parametro | function | — | — | + +### Metodos +`Message` y `this.$message` regresan una instancia del componente Message. Para cerrar manualmente la instancia, puede llamar al metodo `close`. +| Metodo | Descripcion | +| ------ | ---------------------------- | +| close | cierra el componente Message | diff --git a/examples/docs/es/notification.md b/examples/docs/es/notification.md new file mode 100644 index 000000000..fc9c34d89 --- /dev/null +++ b/examples/docs/es/notification.md @@ -0,0 +1,432 @@ + + +## Notification + +Muestra un mensaje de notificación global en una esquina de la página. + +### 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. + +```html + + + +``` +::: + +### Tipos de notificaciones + +Proporcionamos cuatro tipos: success, warning, info y error. + +::: demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type` y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`. + +```html + + + +``` +::: + +### Posicion personalizada + +La notificación puede surgir de cualquier rincón que uno desee. + +::: demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`. + +```html + + + +``` +::: + +### Desplazamiento + +Personalizar el desplazamiento de notificación desde el borde de la pantalla. + +::: demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento. + +```html + + + +``` +::: + +### Usando cadenas HTML +`message` soporta cadenas HTML. + +::: demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML. + +```html + + + +``` +::: + +:::warning + +Aunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de HTML arbitrario en su sitio web puede ser muy peligroso porque puede conducir fácilmente a [ataques XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Por lo tanto, cuando `dangerouslyUseHTMLString` está a true, por favor asegúrese de que el contenido del mensaje es confiable, y **nunca** asigne `message` al contenido proporcionado por el usuario. + +::: + +### Ocultar boton de cerrar + +Es posible ocultar el botón de cerrar + +::: demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación. + +```html + + + +``` +::: + +### Metodo global + +Element ha añadido un método global `$notify` para Vue.prototype. Así que en una instancia de vue se puede llamar `Notification` como lo hacemos en esta página. + +### Importar localmente + +Importar `Notification`: + +```javascript +import { Notification } from 'element-ui'; +``` + +En este caso, debe llamar a `Notification(options)`. También se han registrado métodos para diferentes tipos, e.j. `Notification.success(options)`. + +### Opciones +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------------------ | ---------------------------------------- | ---------------- | ---------------------------------------- | ----------- | +| title | titulo | string | — | — | +| message | mensaje | string/Vue.VNode | — | — | +| dangerouslyUseHTMLString | si `message` es tratado como una cadena HTML | boolean | — | false | +| type | tipo de notificacion | string | success/warning/info/error | — | +| iconClass | clase personalizada de icono. Será anulado por `type` | string | — | — | +| customClass | nombre de clase personalizado para la notificacion | string | — | — | +| duration | duracion antes de cerrar. Si no se quiere que se cierre automaticamente este valor debe estar a 0 | number | — | 4500 | +| position | posicion personalizada | string | top-right/top-left/bottom-right/bottom-left | top-right | +| showClose | si se muestra el boton de cerrar | boolean | — | true | +| onClose | funcion que se ejecuta cuando la notificación se cierra | function | — | — | +| onClick | funcion que se ejecuta cuando se hace click en la notificación | function | — | — | +| offset | desplazamiento desde el borde superior de la pantalla. Cada instancia de notificación del mismo momento debe tener siempre el mismo desplazamiento. | number | — | 0 | + +### Metodos +`Notification` y `this.$notify` devuelven la instancia de la notificacion actual. Para cerrar manualmente la instancia, se puede llamar `close` para ello. + +`Notification` y `this.$notify` devuelven la instancia de notificación actual. Para cerrar manualmente la instancia, puede llamar al método `close`. + +| Metodo | Descripción | +| ------ | ---------------------- | +| close | cierra la notificación | diff --git a/examples/docs/es/pagination.md b/examples/docs/es/pagination.md new file mode 100644 index 000000000..f97e6dad1 --- /dev/null +++ b/examples/docs/es/pagination.md @@ -0,0 +1,220 @@ + + +## Paginación +Si tiene que mostrar muchos datos en una página, utilice la paginación. + +### Uso básico + +:::**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 +
+ When you have few pages + + +
+
+ When you have more than 7 pages + + +
+``` +::: + +### Paginación pequeña + +Usa una paginación pequeña en caso de espacio limitado. + +:::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña. +```html + + +``` +::: + +### Más elementos + +Agrega más modulos basados en su escenario. + +:::**Demo** Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página. + +```html + + +``` +::: + + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------ | ---------------------------------------- | -------- | ---------------------------------------- | -------------------------------------- | +| small | usar paginación pequeña | boolean | — | false | +| 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 | — | — | +| current-page | número actual de la página, soporta el modificador .sync | number | — | 1 | +| layout | layout de la paginación, elementos separados por coma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' | +| page-sizes | opciones para la cantidad de elementos por página | number[] | — | [10, 20, 30, 40, 50, 100] | +| popper-class | clase propia para el `dropdown` del `select` del número de páginas | string | — | — | +| prev-text | texto para el botón `prev` | string | — | — | +| next-text | texto para el botón `next` | string | — | — | + +### Eventos +| Nombre del evento | Descripción | Parámetros | +| ----------------- | --------------------------------------- | ----------------------------- | +| size-change | se dispara cuando `page-size` cambia | nuevo valor de `page-size` | +| current-change | se dispara cuando `current-page` cambia | nuevo valor de `current-page` | + +### Slot +| Nombre | Descripción | +| ------ | ---------------------------------------- | +| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` | diff --git a/examples/docs/es/popover.md b/examples/docs/es/popover.md new file mode 100644 index 000000000..544693af7 --- /dev/null +++ b/examples/docs/es/popover.md @@ -0,0 +1,247 @@ + + + + +## Popover + +### Uso básico + +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 alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots). + +```html + + + + + + +Hover to activate +Click to activate + + Focus to activate + +``` +::: + +### Información anidada +Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada. + +:::**Demo** Reemplaza el atributo `content` con un `slot`. + +```html + + + + + + + + +Click to activate + + +``` +::: + +### Operación anidada + +Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`. + +:::**Demo** +```html + +

Are you sure to delete this?

+
+ cancel + confirm +
+ + +Delete + + +``` + + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | -------------- | ---------------------------------------- | ---------------------------------------- | +| trigger | cómo se dispara el popover | string | click/focus/hover/manual | click | +| title | título del popover | string | — | — | +| content | contenido del popover, puede ser sustituido por un `slot` | string | — | — | +| width | ancho del popover | string, number | — | Min width 150px | +| placement | posición del popover en la pantalla | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | +| disabled | si el popover está deshabilitado | boolean | — | false | +| value(v-model) | si el popover está visible | Boolean | — | false | +| offset | popover offset | number | — | 0 | +| transition | popover transition animation | string | — | el-fade-in-linear | +| 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 | — | — | + +### Slot +| Nombre | Descripción | +| --------- | ------------------------------------ | +| — | texto contenido en popover | +| reference | elemento HTML que dispara el popover | + +### Eventos +| Nombre del evento | Descripción | Parámetros | +| ----------------- | --------------------------------------- | ---------- | +| show | se dispara cuando se muestra el popover | — | +| hide | se dispara cuando se oculta el popover | — | diff --git a/examples/docs/es/progress.md b/examples/docs/es/progress.md new file mode 100644 index 000000000..656a33ed5 --- /dev/null +++ b/examples/docs/es/progress.md @@ -0,0 +1,59 @@ + +## Progreso +Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta. + +### Barra de progreso lineal (porcentage externo) + +:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. +```html + + + + +``` +::: + +### Barra de progreso lineal (porcentage interno) +En este caso el porcentage no toma espacio adicional. + +:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma. +```html + + + + +``` +::: + +### Barra de progreso circular + +:::**Demo** Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo. +```html + + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptado | Por defecto | +| ------------ | ---------------------------------------- | ------- | ----------------- | ----------- | +| percentage | porcentaje, requerido | number | 0-100 | 0 | +| type | tipo de barra de progreso | string | line/circle | line | +| stroke-width | ancho de la barra de progreso | number | — | 6 | +| text-inside | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | — | false | +| status | estado actual de la barra de progreso | string | success/exception | — | +| width | ancho del canvas que contiene la barra de progreso circula | number | — | 126 | +| show-text | mostrar porcentaje | boolean | — | true | + diff --git a/examples/docs/es/quickstart.md b/examples/docs/es/quickstart.md new file mode 100644 index 000000000..c85c2f76f --- /dev/null +++ b/examples/docs/es/quickstart.md @@ -0,0 +1,269 @@ +## Inicio rápido + +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 los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también. + +Si prefiere no utilizarlas, lee las siguientes secciones de este documento. + +### Usando vue-cli + +Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli): + +```shell +> npm i -g vue-cli +> mkdir my-project && cd my-project +> vue init webpack +> npm i && npm i element-ui +``` + +### Importando Element + +Puede importar Element completamente o solamente importar lo que necesite. Comencemos importando todo. + +#### Importando todo + +In main.js: +```javascript +import Vue from 'vue' +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-chalk/index.css' +import App from './App.vue' + +Vue.use(ElementUI) + +new Vue({ + el: '#app', + render: h => h(App) +}) +``` +El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado. + +#### 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 pequeño que de la otra manera. + +Primero, instale babel-plugin-component: + +```bash +npm install babel-plugin-component -D +``` + +Luego edite .babelrc: +```json +{ + "presets": [ + ["es2015", { "modules": false }] + ], + "plugins": [["component", [ + { + "libraryName": "element-ui", + "styleLibraryName": "theme-chalk" + } + ]]] +} +``` + +Luego, si necesita Button y Select, edite main.js: + +```javascript +import Vue from 'vue' +import { Button, Select } from 'element-ui' +import App from './App.vue' + +Vue.component(Button.name, Button) +Vue.component(Select.name, Select) +/* or + * Vue.use(Button) + * Vue.use(Select) + */ + +new Vue({ + el: '#app', + render: h => h(App) +}) +``` + +Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json)) + +```javascript +import Vue from 'vue' +import { + Pagination, + Dialog, + Autocomplete, + Dropdown, + DropdownMenu, + DropdownItem, + Menu, + Submenu, + MenuItem, + MenuItemGroup, + Input, + InputNumber, + Radio, + RadioGroup, + RadioButton, + Checkbox, + CheckboxButton, + CheckboxGroup, + Switch, + Select, + Option, + OptionGroup, + Button, + ButtonGroup, + Table, + TableColumn, + DatePicker, + TimeSelect, + TimePicker, + Popover, + Tooltip, + Breadcrumb, + BreadcrumbItem, + Form, + FormItem, + Tabs, + TabPane, + Tag, + Tree, + Alert, + Slider, + Icon, + Row, + Col, + Upload, + Progress, + Badge, + Card, + Rate, + Steps, + Step, + Carousel, + CarouselItem, + Collapse, + CollapseItem, + Cascader, + ColorPicker, + Transfer, + Container, + Header, + Aside, + Main, + Footer, + Loading, + MessageBox, + Message, + Notification +} from 'element-ui' + +Vue.use(Pagination) +Vue.use(Dialog) +Vue.use(Autocomplete) +Vue.use(Dropdown) +Vue.use(DropdownMenu) +Vue.use(DropdownItem) +Vue.use(Menu) +Vue.use(Submenu) +Vue.use(MenuItem) +Vue.use(MenuItemGroup) +Vue.use(Input) +Vue.use(InputNumber) +Vue.use(Radio) +Vue.use(RadioGroup) +Vue.use(RadioButton) +Vue.use(Checkbox) +Vue.use(CheckboxGroup) +Vue.use(Switch) +Vue.use(Select) +Vue.use(Option) +Vue.use(OptionGroup) +Vue.use(Button) +Vue.use(ButtonGroup) +Vue.use(Table) +Vue.use(TableColumn) +Vue.use(DatePicker) +Vue.use(TimeSelect) +Vue.use(TimePicker) +Vue.use(Popover) +Vue.use(Tooltip) +Vue.use(Breadcrumb) +Vue.use(BreadcrumbItem) +Vue.use(Form) +Vue.use(FormItem) +Vue.use(Tabs) +Vue.use(TabPane) +Vue.use(Tag) +Vue.use(Tree) +Vue.use(Alert) +Vue.use(Slider) +Vue.use(Icon) +Vue.use(Row) +Vue.use(Col) +Vue.use(Upload) +Vue.use(Progress) +Vue.use(Badge) +Vue.use(Card) +Vue.use(Rate) +Vue.use(Steps) +Vue.use(Step) +Vue.use(Carousel) +Vue.use(CarouselItem) +Vue.use(Collapse) +Vue.use(CollapseItem) +Vue.use(Cascader) +Vue.use(ColorPicker) +Vue.use(Container) +Vue.use(Header) +Vue.use(Aside) +Vue.use(Main) +Vue.use(Footer) + +Vue.use(Loading.directive) + +Vue.prototype.$loading = Loading.service +Vue.prototype.$msgbox = MessageBox +Vue.prototype.$alert = MessageBox.alert +Vue.prototype.$confirm = MessageBox.confirm +Vue.prototype.$prompt = MessageBox.prompt +Vue.prototype.$notify = Notification +Vue.prototype.$message = Message +``` + +### Configuración global +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 +import Vue from 'vue' +import Element from 'element-ui' +Vue.use(Element, { size: 'small' }) +``` + +Importando Element parcialmente： +```JS +import Vue from 'vue' +import { Button } from 'element-ui' + +Vue.prototype.$ELEMENT = { size: 'small' } +Vue.use(Button) +``` +Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`. + +### Empiece ya! +Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo: + +```bash +# visit localhost:8086 +npm run dev +``` + +Build: + +```bash +npm run build +``` +Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos. \ No newline at end of file diff --git a/examples/docs/es/radio.md b/examples/docs/es/radio.md new file mode 100644 index 000000000..d7f935cbf --- /dev/null +++ b/examples/docs/es/radio.md @@ -0,0 +1,231 @@ + + +## Radio +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 necesita enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`. +```html + + + +``` +::: + +### Deshabilitado + +El atributo `disabled` es utilizado para deshabilitar un Radio. + +:::demo Solo necesita agregar el atributo `disabled`. +```html + + + +``` +::: + +### Grupo de elementos Radio + +Recomendado para seleccionar opciones que se excluyen mutuamente. + +:::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 + + Option A + Option B + Option C + + + +``` +::: + +### Estilo Button + +Radio con estilo de botón. + +:::demo Solo necesita cambiar el elemento `el-radio` a `el-radio-button`. Se provee el atributo `size`. +```html + + + +``` +::: + +### Con bordes + +:::demo El atributo `border` agrega un borde al elemento Radio. +```html + + + +``` +::: + +### Atributos de Radio + +| Atributo | Descripción | Tipo | Valores Aceptado | 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 | tamaño del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | — | +| name | atributo nativo 'name' | string | — | — | + +### Atributos de Radio-button + +| Atributo | Descripción | Tipo | Valores Aceptado | Por defecto | +| -------- | ------------------------------ | --------------- | ---------------- | ----------- | +| label | el valor del Radio | string / number | — | — | +| disabled | si el Radio está deshabilitado | boolean | — | false | +| name | atributo nativo 'name' | string | — | — | + +### Atributos de Radio-group + +| Atributo | Descripción | Tipo | Valores Aceptado | Valores por defecto | +| ---------- | ---------------------------------------- | ------- | --------------------- | ------------------- | +| size | tamaño de los `radio buttons` o `bordered radios` | string | medium / small / mini | — | +| disabled | si la anidación de radios está desahabilitada | boolean | — | false | +| text-color | color de las letras cuando el botón está activo | string | — | #ffffff | +| fill | color del borde y fondo cuando el botón está activo | string | — | #409EFF | + +### Eventos de Radio + +| Nombre de evento | Descripción | Parámetros | +| ---------------- | --------------------------------- | ---------------------------------------- | +| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado | + + +### Eventos de Radio-group + +| Nombre de evento | Descripción | Parámetros | +| ---------------- | --------------------------------- | ---------------------------------------- | +| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado | + diff --git a/examples/docs/es/rate.md b/examples/docs/es/rate.md new file mode 100644 index 000000000..c1d7392e8 --- /dev/null +++ b/examples/docs/es/rate.md @@ -0,0 +1,178 @@ + + + + +## Calificación + +Usado para la calificación + +### Uso básico + +:::demo Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`. + + +``` html +
+ Default + +
+
+ Color for different levels + + +
+ + +``` +::: + +### Con texto + +Usa texto para indicar la puntuación + +:::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 + + + + +``` +::: + +### Más iconos + +Puede utilizar iconos para diferenciar cada componente. + +:::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 + + + + +``` +::: + +### Solo lectura + +La calificación de solo lectura es para mostrar la puntuación. Soporta media estrella. + +:::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 + + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptado | Por defecto | +| ------------------------ | ---------------------------------------- | ------- | ---------------- | ---------------------------------------- | +| max | puntuación máxima | number | — | 5 | +| disabled | si la calificación es de solo lectura | boolean | — | false | +| allow-half | si escoger media estrella está permitido | boolean | — | false | +| low-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel bajo | number | — | 2 | +| high-threshold | valor del umbral entre nivel bajo y medio. El valor será incluido en el nivel alto | number | — | 4 | +| colors | arreglo de colores para iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] | +| void-color | color para iconos no seleccionados | string | — | #C6D1DE | +| disabled-void-color | color para las iconos no seleccionados de solo lectura | string | — | #EFF2F7 | +| icon-classes | arreglo de nombres para clases de iconos. Debe tener 3 elementos, cada uno corresponde a un nivel de puntuación | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] | +| void-icon-class | nombre de clase para iconos no seleccionados | string | — | el-icon-star-off | +| disabled-void-icon-class | nombre de clase para elementos no seleccionados de solo lectura | string | — | el-icon-star-on | +| show-text | muestra el texto | boolean | — | false | +| show-score | muestra puntuación actual. `show-score` y `show-text` no pueden ser verdaderos al mismo tiempo | boolean | — | false | +| text-color | color del texto | string | — | #1F2D3D | +| texts | arreglo de textos | array | — | ['极差', '失望', '一般', '满意', '惊喜'] | +| score-template | plantilla de puntuación | string | — | {value} | + +### Eventos +| Nombre del evento | Descripción | Parámetros | +| ----------------- | ---------------------------------------- | ---------------------- | +| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio | diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md new file mode 100644 index 000000000..de32aadd4 --- /dev/null +++ b/examples/docs/es/select.md @@ -0,0 +1,719 @@ + + + + +## Select + +Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee. + +### Uso básico + +:::demo `v-model` es el valor de `el-option` que está seleccionado actualmente. + +```html + + + +``` +::: + +### Disabled en el-option + +:::demo Establezca el valor de `disabled` en `el-option` como `true` para deshabilitar esta opción. + +```html + + + +``` +::: + +### Disabled en el-select + +Desactivar todo el componente. + +:::demo Configure `disabled` de `el-select` para deshabilitarla. + +```html + + + +``` +::: + +### Select simple limpiable + +Puede limpiar un Select con un icono. + +:::demo Establezca el atributo `clearable` para `el-select` y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual. + +```html + + + +``` +::: + +### Selección múltiple básica + +Selección multiple 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`. + +```html + + + +``` +::: + +### Personalizar template + +Puede personalizar templates HTML para las opciones. + +:::demo Inserte templates HTML personalizados en el slot de `el-option`. + +```html + + + +``` +::: + +### Agrupando + +Mostrar opciones en grupos. + +:::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo. + +```html + + + +``` +::: + +### Filtrado de opciones + +Puede filtrar opciones como lo desee. + +:::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. + +```html + + + +``` +::: + +### Búsqueda remota + +Introduzca palabras y datos para buscar desde el servidor. + +:::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente. + +```html + + + +``` +::: + +### Crear nuevos items +Crear y seleccionar nuevos items que no están incluidas en las opciones de selección. + +:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`. + +```html + + + +``` +::: + +:::tip + +Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad. + +::: + +### Select atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- | +| multiple | si multiple-select esta activo | boolean | — | false | +| disabled | si Select esta deshabilitado | boolean | — | false | +| collapse-tags | si se colapsan los tags a un texto cuando `multiple` es `true`. | boolean | — | false | +| value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value | +| size | tamaño del Input | string | large/small/mini | — | +| clearable | si el single select puede ser limpiable | boolean | — | false | +| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 | +| name | el atributo `name` del input seleccionado | string | — | — | +| placeholder | placeholder | string | — | Select | +| filterable | si Select es filtrable | boolean | — | false | +| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false | +| filter-method | metodo de filtrado personalizado | function | — | — | +| remote | si las opciones se traeran desde el servidor | boolean | — | false | +| remote-method | metodo de busqueda remota personalizada | function | — | — | +| loading | si Select está cargando datos del servidor | boolean | — | false | +| loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading | +| no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data | +| no-data-text | texto mostrado cuando no hay opciones | string | — | No data | +| popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — | +| 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 | + +### Eventos Select +| Nombre | Descripción | Parametros | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| change | se dispara cuando el valor del select cambia | valor actual del select | +| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso | +| remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido | +| clear | se dispara cuando el icono se clickea en un Select limpiable | — | +| blur | se dispara cuando el input pierde el foco | (event: Event) | +| focus | se dispara cuando el input obtiene el foco | (event: Event) | + +### Atributos del grupo de opciones +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ------- | ----------------- | ----------- | +| label | nombre del grupo | string | — | — | +| disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false | + +### Atributos de opciones +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- | +| value | valor de option | string/number/object | — | — | +| label | etiqueta de option, es igual a `value` si se omite | string/number | — | — | +| disabled | si option esta deshabilitado | boolean | — | false | + +### Metodos +| Metodo | Descripción | Parametros | +| ------ | --------------------------- | ---------- | +| focus | Foco en el componente input | - | diff --git a/examples/docs/es/slider.md b/examples/docs/es/slider.md new file mode 100644 index 000000000..975464fe9 --- /dev/null +++ b/examples/docs/es/slider.md @@ -0,0 +1,252 @@ + + + + +## Slider + +Desliza el slider dentro de un rango fijo. + +### Uso básico + +El valor actual se muestra cuando se inicia el arrastre del slider. + +:::demo Personalice el valor inicial del slider configurando el valor vinculado. + +```html + + + +``` +::: + +### Valores discretos + +Las opciones pueden ser discretas. + +:::demo Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`. + +```html + + + +``` +::: + +### Slider con input + +Inserte el valor a traves de un input + +:::demo Configure el atributo `show-input` para que muestre un input a la derecha. + +```html + + + +``` +::: + +### Seleccion de rangos + +Se soporta la selección de un rango de valores. + +:::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite. + +```html + + + +``` +::: + +### Modo Vertical + +:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` . + +```html + + + +``` +::: + +## Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- | +| min | valor minimo | number | — | 0 | +| max | valor máximo | number | — | 100 | +| disabled | si el Slider esta deshabitado | boolean | — | false | +| step | tamaño del paso | number | — | 1 | +| show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false | +| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true | +| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false | +| show-tooltip | si se muestra el valor en un tooltip | boolean | — | true | +| format-tooltip | formato para mostrar el valor del tooltip | function(value) | — | — | +| range | si se usaran un rango | boolean | — | false | +| vertical | modo vertical | boolean | — | false | +| height | alto del Slider, requerido en modo vertical | string | — | — | +| label | etiqueta para screen reader | string | — | — | +| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 | + +## Eventos +| Nombre | Descripción | Parametros | +| ------ | ---------------------------------------- | ------------------------ | +| 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 | + diff --git a/examples/docs/es/steps.md b/examples/docs/es/steps.md new file mode 100644 index 000000000..8eff2e205 --- /dev/null +++ b/examples/docs/es/steps.md @@ -0,0 +1,176 @@ + + +## Steps + +Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos. + +### Uso básico + +Barra de pasos simple. + +:::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados. + +```html + + + + + + +Next step + + +``` +::: + +### Step bar con el status + +Muestra el estado del step para cada paso. + +:::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página. + +```html + + + + + +``` +::: + +### Centrado + +El título y la descripción pueden estar centrados. + +:::demo +```html + + + + + + +``` +::: + +### Step bar con descripción + +Puede poner una descripción para cada paso. + +:::demo +```html + + + + + +``` +::: + +### Step bar with icon + +En la barra de pasos se pueden utilizar diversos iconos personalizados. + +:::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre. + +```html + + + + + +``` +::: + +### Step bar vertical + +Step bar vertical. + +:::demo Sólo tiene que fijar el atributo `direction` a ` vertical` en el elemento `el-steps`. + +```html +
+ + + + + +
+``` +::: + +### Step bar simple +Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`. + +:::demo +```html + + + + + + + + + + + + +``` +::: + +### Steps atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- | +| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — | +| direction | dirección de visualización | string | vertical/horizontal | horizontal | +| active | actual paso de activación | number | — | 0 | +| process-status | status del paso actual | string | wait / process / finish / error / success | process | +| finish-status | status del paso final | string | wait / process / finish / error / success | finish | +| align-center | centrado de título y descripción | boolean | — | false | +| simple | si aplicar un tema simple | boolean | - | false | + +### Step atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- | +| title | titulo del paso | string | — | — | +| description | descripción del paso | string | — | — | +| icon | icono del paso | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string | — | +| status | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | - | | + +### Step Slot +| Name | Description | +| ----------- | -------------------- | +| icon | Icono personalizado | +| title | Titulo del paso | +| description | Descripcion del paso | + diff --git a/examples/docs/es/switch.md b/examples/docs/es/switch.md new file mode 100644 index 000000000..83b047131 --- /dev/null +++ b/examples/docs/es/switch.md @@ -0,0 +1,167 @@ + + + + +## Switch + +Switch es utilizdo para realizar cambios entre dos estados opuestos. + +### Uso básico + +:::demo Enlace `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado. + +```html + + + + + + +``` +::: + +### Texto de descripción +:::demo Puede agregar los atributos `active-text` y `inactive-text` para mostrar los textos. + +```html + + + + + + +``` +::: + +### Tipos de valores extendidos + +:::demo Puede establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`. + +```html + + + + + + +``` + +::: + +### Disabled + +:::demo Agregar el atributo `disabled` desactiva el componente Switch. + +```html + + + + + + +``` +::: + +### Atributos + +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------------- | ---------------------------------------- | ------------------------- | ----------------- | ----------- | +| disabled | si Switch esta deshabilitado | boolean | — | false | +| width | ancho del componente Switch | number | — | 40 | +| active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | — | +| inactive-icon-class | nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text` | string | — | — | +| active-text | texto mostrado en el estado `on` | string | — | — | +| inactive-text | texto mostrado en el estado `off` | string | — | — | +| active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true | +| inactive-value | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false | +| active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF | +| inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA | +| name | nombre de entrada del componente Switch | string | — | — | + +### Eventos + +| Nombre del evento | Descripción | Parametro | +| ----------------- | --------------------------------- | --------- | +| change | se dispara cuando el valor cambia | valor | +después de cambiar + +### Metodos +| Metodo | Descripción | Parametro | +| ------ | ------------------------- | --------- | +| focus | foco al componente Switch | — | diff --git a/examples/docs/es/table.md b/examples/docs/es/table.md new file mode 100644 index 000000000..4d89ddb26 --- /dev/null +++ b/examples/docs/es/table.md @@ -0,0 +1,2032 @@ + + + + +## Tablas + +Visualiza múltiples datos con un formato en particular. Podrá ordenar, filtrar y comparar datos en una tabla. + +### Tabla básica + +La tabla básica es solo para mostrar datos. + +:::demo Después de haber establecido el atributo `data` de `el-table` con un arreglo de objetos, puede usar la propiedad `prop` (el correspondiente a la clave de un objeto dentro del arreglo `data`) en `el-table-column` para insertar datos a las columnas de la tabla, y establecer el atributo `label` para definir el nombre de la columna. También puede usar el atributo `width` para establecer el ancho de las columnas. + +```html + + + +``` +::: + +### Tabla con franjas + +La tabla con franjas hace más fácil distinguir filas diferentes. + +:::demo El atributo `stripe` también acepta un `Boolean`. Si se encuentra `true`, la tabla será con franjas. +```html + + + +``` +::: + +### Tabla con bordes + +:::demo Por defecto, la tabla no tiene bordes verticales. Si lo necesita, puede establecer el atributo `border` a `true`. + +```html + + + +``` +::: + +### Tabla con estados + +Puede destacar el contenido de la tabla para distinguir entre "success, information, warning, danger" y otros estados. + +:::demo Utilice `row-class-name` en `el-table` para agregar clases personalizadas a una fila en específico. Y entonces, podrá darle diseño con estas clases. +```html + + + + + +``` +::: + +### Tabla con cabecera fija + +Cuando esta tiene demasiadas filas, puede utilizar una cabecera fija. + +:::demo Al configurar el atributo `height` de `el-table`, puede fijar la cabecera de la tabla sin agregar otro código. +```html + + + +``` +::: + +### Tabla con columnas fijas + +Cuando se tienen demasiadas columnas, puede fijar alguna de estas. + +:::demo El atributo `fixed` es utilizado en `el-table-column`, este acepta un `Boolean`. Si es `true`, la columna será fijada a la izquierda. También acepta dos tipos: `left` y `right`, ambos indican donde debe ser fijada la columna. +```html + + + +``` +::: + +### Tabla con columnas y cabecera fija. + +Cuando tienes grandes cantidades de datos para colocar en una tabla, puede fijar la cabecera y columnas al mismo tiempo. + +:::demo Fije las columnas y cabecera al mismo tiempo combinando los dos ejemplos anteriores. +```html + + + +``` +::: + +### Altura fluido de tabla con cabecera fija (y columnas) + +Cuando los datos se modifican dinámicamente, es posible que necesite que la tabla tenga una altura máxima en lugar de una altura fija, y además, que se muestre la barra de desplazamiento si es necesario. + +:::demo Al configurar el atributo `max-height` de `el-table`, tu puedes fijar la cabecera de la tabla. La barra de desplazamiento únicamente se mostrará si la altura sobrepasa el valor de la altura máxima. +```html + + + +``` +::: + +### Agrupando cabeceras de la tabla + +Cuando la estructura de datos es compleja, tu puedes hacer uso de cabeceras agrupadas para mostrar datos por jerarquía. + +:::demo Solo necesitas colocar `el-table-column` dentro de un `el-table-column`, de esta forma lograrás agruparlas. +```html + + + +``` +::: + +### Selección única + +La selección de una fila esta soportada. + +:::demo La tabla permite la selección de una sola fila. Puede activarlo agregando el atributo `highlight-current-row`. Un evento llamado `current-change` será disparado cuando la selección de la fila cambie, sus parámetros son la fila antes y después de que ocurre el cambio: `currentRow` y `oldCurrentRow`. Si necesita mostrar el índice de la fila, puede agregar un nuevo `el-table-column` con el atributo `type` asignado al `index` y podrá ver el índice iniciando desde 1. +```html + + + +``` +::: + +### Selección multiple + +También puede seleccionar múltiples filas. + +:::demo Activar la selección múltiple es sencillo: Solo debe agregar a `el-table-column` con su `type` establecido en `selection`. Además de la selección múltiple, este ejemplo también utiliza `show-overflow-tooltip`: por defecto, si el contenido es demasiado largo, este permite córtalo dentro de múltiples líneas. Si lo que busca es mantener una línea, utilice el atributo `show-overflow-tooltip`, que acepta un valor `Boolean`. Cuando este está establecido en `true`, el contenido extra puede mostrar un _tooltip_ cuando se hace _hover_ sobre la celda. +```html + + + +``` +::: + +### Ordenamiento + +Ordena los datos para encontrar o comparar información rápidamente. + +:::demo Establezca el atributo `sortable` para ordenar los datos de una columna. Este acepta un `Boolean` con un valor por defecto `false`. Establezca el atributo `default-sort` para determinar la columna y orden por defecto. Para aplicar sus propias reglas de ordenamiento, utilice `sort-method` o `sort-by`. Si lo que necesita es ordenar de forma remota desde backend, establezca `sortable` a `custom`, y escuche el evento `sort-change` de la tabla. Al dispararse el evento, tendrá acceso a la columna ordenada y orden para que pueda obtener los datos de la tabla ordenada desde su API. En este ejemplo utilizamos otro atributo llamado `formatter` para darle un formato al valor de ciertas columnas. Este acepta una función que tiene dos parámetros: `row` y `column`. Puede disparar este de acuerdo a sus propias necesidades. +```html + + + +``` +::: + +### Filtros + +Filtra la tabla para encontrar la información que necesita. + +:::demo Establezca el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene dos parámetros: `value` y `row`. +```html + + + +``` +::: + +### Plantilla de columna personalizada + +Personalice la columna de la tabla para que pueda integrarse con otros componentes. + +:::demo Tiene acceso a la siguiente informacion: row, column, $index, store (gestor de estados de la tabla) por [Scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Los Scoped Slots son soportados desde `1.1`, `inline-template` todavía funciona, pero no es recomendado). +```html + + + +``` +::: + +### Fila expandible + +Cuando el contenido de la fila es demasiado largo y busca no mostrar la barra de desplazamiento horizontal, puede utilizar la caracteristica de fila expandible. + +:::demo Puede activar la fila expandible estableciendo la propiedad `type` a `expand` y Scoped Slots. La plantilla para `el-table-column` se representará como el contenido de la fila expandible, y puede acceder a algunos atributos cuando está usando `Scoped Slots` en plantillas de columna personalizadas. +```html + + + +``` +::: + +### Fila de resumen + +Para una tabla de números, puede agregar una fila extra en el pie de página de la tabla que muestra la suma de cada columna. + +:::demo Puede agregar la fila de resumen configurando `show-summary` a `true`. Por defecto, para la fila de resumen, la primera columna no resume nada, pero siempre muestra la suma (puede configurar el texto mostrado usando `sum-text`), mientras que otras columnas suman todos los números en esa columna y los muestran. Por supuesto, puede definir su propio comportamiento de suma. Para hacerlo, utiliza un método `summary-method`, que devuelve un array, y cada elemento que fue retornado desde el arreglo puede ser mostrado en las columnas del resumen de fila. La segunda tabla de este ejemplo es una demostración detallada. +```html + + + +``` +::: + +### Fusión de filas y columnas + +Configurar _rowspan_ y _colspan_ le permite fusionar celdas. + +:::demo Utilice el atributo `span-method` para configurar rowspan y colspan. Este acepta un método, y pasa un objeto a ese método incluyedo la fila actual `row`, columna actual `column`, índice de fila actual `rowIndex` y índice de columna actual `columnIndex`. El método debe devolver un arreglo de dos números, el primer número siendo `rowspan` y el segundo `colspan`. También puede devolver un objeto con las propiedades `rowspan` y `colspan`. + +```html + + + +``` +::: + +### Índice personalizado + +Puede personalizar el índice de la fila con la propiedad `type=index` de las columnas. + +:::demo Para personalizar el índice de la fila, utilice el atributo `index` en `` con `type=index`. Si este es asignado a un número, todos los índices tendrán un desplazamiento de ese número. Este también acepta un método con cada índice (iniciando desde 0) como un parámetro, y este devuelve un valor que puede ser mostrado como índice. + +```html + + + +``` +::: + +### Atributos de la tabla +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ---------------------- | ---------------------------------------- | ---------------------------------------- | ------------------------------ | ---------------------------------------- | +| data | Datos de la tabla | array | — | — | +| height | Altura de la tabla. Por defecto esta tiene un tamaño `auto`. Si este valor es un número, la altura es medido en pixeles; si este valor es una cadena, la altura es afectada por estilos externos | string/number | — | — | +| max-height | Altura máxima de la tabla. La altura de la tabla comienza desde `auto` hasta que alcanza la altura máxima. El `max-height` es medido en pixeles, lo mismo que `height` | string/number | — | — | +| stripe | especifica si la tabla será en franjas | boolean | — | false | +| border | especifica si la tabla tiene bordes verticales | boolean | — | false | +| size | tamaño de la tabla | string | medium / small / mini | — | +| fit | especifica si el ancho de la columna se adapta automáticamente a su contenedor | boolean | — | true | +| show-header | especifica si la cabecera de la tabla es visible | boolean | — | true | +| highlight-current-row | especifica si la fila actual es resaltado | boolean | — | false | +| current-row-key | clave de la fila actual, un ajuste de propiedad única | string,number | — | — | +| row-class-name | función que devuelve nombres de clases personalizadas para una fila, o una cadena asignando nombres de clases para cada fila | Function({row, rowIndex})/String | — | — | +| row-style | función que devuelve el estilo personalizado para una fila, o un objeto asignando estilos personalizado para cada fila | Function({row, rowIndex})/Object | — | — | +| cell-class-name | función que devuelve nombres de clases personalizadas para una celda, o una cadena asignando nombres de clases para cada celda | Function({row, rowIndex})/String | — | — | +| cell-style | función que devuelve estilos personalizados para una celda, o un objeto asignado a estilos personalizados para cada celda | Function({row, rowIndex})/Object | — | — | +| header-row-class-name | función que devuelve nombre de clases personalizadas para una fila en la cabecera de la tabla, o una cadena asignando nombres de clases para cada fila en la cabecera de la tabla | Function({row, rowIndex})/String | — | — | +| header-row-style | función que devuelve estilos personalizados para una fila en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada fila en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — | +| header-cell-class-name | función que devuelve nombre de clases personalizadas para una celda en la cabecera de la tabla, o una cadena asignando nombres de clases para cada celda en la cabecera de la tabla | Function({row, rowIndex})/String | — | — | +| header-cell-style | función que devuelve estilos personalizados para una celda en la cabecera de la tabla, o un objeto asignando estilos personalizados para cada celda en la cabecera de la tabla | Function({row, rowIndex})/Object | — | — | +| row-key | clave de datos de la fila, utilizada para optimizar la representación de los datos. Es obligatorio `reserve-selection` esta habilitado. Cuando su tipo es string, se permite el acceso multinivel, por ejemplo, `user.info.id`, pero `user.info[0].id` no es permitido, en cuyo caso se debe usar una `function` | Function(row)/String | — | — | +| empty-text | Texto mostrado cuando no existen datos. Puede personalizar esta área con `slot="empty"` | String | — | No Data | +| default-expand-all | especifica si todas las filas se expanden por defeto, solo funciona cuando la tabla tiene una columna `type="expand"` | Boolean | — | false | +| expand-row-keys | establece las filas expandidas a través de esta propiedad, este valor es la clave de filas expandidas, debería establecer `row-key` antes de usar esta propiedad | Array | — | | +| default-sort | establece la columna y orden por defecto. La propiedad `prop` es utilizada para establecer la columna de ordenamiento por defecto, la propiedad `order` es utilizada para definir el tipo de orden por defecto | Object | `order`: ascending, descending | if `prop` is set, and `order` is not set, then `order` is default to ascending | +| tooltip-effect | propiedad `effect` para efectos en tooltip | String | dark/light | | +| show-summary | especifica si debe mostrar la fila de resumen | Boolean | — | false | +| sum-text | texto a mostrar para la primer columna de la fila de resumen | String | — | Sum | +| summary-method | método personalizado para resumen | Function({ columns, data }) | — | — | +| span-method | método que devuelve _rowspan_ y _colspan_ | Function({ row, column, rowIndex, columnIndex }) | — | — | + +### Eventos de la tabla +| Nombre del evento | Descripción | Parámetros | +| ----------------- | ---------------------------------------- | --------------------------------- | +| select | se dispara cuando el usuario hace clic al _checkbox_ (caja de selección) en una fila | selection, row | +| select-all | se dispara cando el usuario hace clic al _checkbox_ (caja de selección) en una cabecera de la tabla | selection | +| selection-change | se dispara cuando selección cambia | selection | +| cell-mouse-enter | se dispara cuando se desplaza dentro de una celda | row, column, cell, event | +| cell-mouse-leave | se dispara cuando se desplaza fuera de una celda | row, column, cell, event | +| cell-click | se dispara cuando se hace clic en una celda | row, column, cell, event | +| cell-dblclick | se dispara cuando se hace doble clic en una celda | row, column, cell, event | +| row-click | se dispara cuando se hace clic en una fila | row, event, column | +| row-contextmenu | se dispara cuando el usuario hace clic derecho en una fila | row, event | +| row-dblclick | se dispara cuando se hace doble clic en una fila | row, event | +| header-click | se dispara cuando se hace click en una cabecera de columna | column, event | +| sort-change | se dispara cuando el ordenamiento de la tabla cambia | { column, prop, order } | +| filter-change | clave de la columna. Si necesitas utilizar el evento filter-change, este atributo es obligatorio para identificar cuál columna está siendo filtrada | filters | +| current-change | se dispara cuando la fila actual cambia | currentRow, oldCurrentRow | +| header-dragend | se dispara cuando se deja de arrastrar la cabecera | newWidth, oldWidth, column, event | +| expand-change | se dispara cuando el usuario expande o colapsa una fila | row, expandedRows | + +### Métodos de la tabla +| Metodo | Descripción | Parametros | +| ------------------ | ---------------------------------------- | ------------- | +| clearSelection | utilizado en selección múltiple de la tabla, limpiar selección, puede ser poco útil cuando `reserve-selection` está habilitado | selection | +| toggleRowSelection | utilizado en selección múltiple de la tabla, alterna si una cierta fila es seleccionada. Con el segundo parámetro, puede directamente establecer si la fila es seleccionada | row, selected | +| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded | +| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row | +| clearSort | limpiar ordenamiento, restaurar datos a orden original | — | +| clearFilter | limpiar filtros | — | + +### Slots de la tabla +| Nombre | Descripción | +| ------ | ---------------------------------------- | +| append | El contenido será insertado después de la última fila. Es posible que necesites este espacio si deseas implementar _scroll_ infinito para la tabla. Este espacio se mostrará sobre la fila de resumen si hay uno. | + +### Atributos para las columnas de la tabla +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------------------- | ---------------------------------------- | --------------------------------- | ----------------------------- | ----------- | +| type | tipo de la columna. Si se establece a `selection`, la columna puede mostrar un _checkbox_. Si se establece a `index`, la columna puede mostrar el índice de la fila (iniciando desde 1). Si se establece a `expand`, la columna puede mostrar un ícono para expandir. | string | selection/index/expand | — | +| index | personalice los índices para cada fila, funciona en columnas con `type=index` | string, Function(index) | - | - | +| label | etiqueta de la columna | string | — | — | +| column-key | clave de la columna. Si necesita utilizar el evento `filter-change`, necesita el atributo para identificar cual columna está siendo filtrada | string | string | — | +| prop | nombre del campo. También puede usar su alias: `property` | string | — | — | +| width | ancho de la columna | string | — | — | +| min-width | ancho mínimo de la columna. Columnas con `width` tienen un ancho fijo, mientras que las columnas con `min-width` tienen un ancho que se distribuye en proporción. | string | — | — | +| fixed | especifica si la columna se fija a la izquierda o a la derecha. Se fijará a la izquierda si es `true` | string/boolean | true/left/right | — | +| render-header | Función de renderizado para la cabecera de la tabla de esta columna | Function(h, { column, $index }) | — | — | +| sortable | especifica que columna puede ser ordenado. El ordenamiento remoto puede ser hecho configurando el atributo `custom` y escucha al evento de tabla `sort-change` | boolean, string | true, false, custom | false | +| sort-method | método de ordenamiento, funciona cuando `sortable` está en `true`. Debería devolver un número, al igual que Array.sort | Function(a, b) | — | — | +| sort-by | especifica por cual propiedad de va a ordenar, funciona cuando `sortable` es `true` y `sort-method` es `undefined`. Si se establece a un arreglo, la columna ordenara secuencialmente por la siguiente propiedad si la anterior es igual | Function(row, index)/String/Array | — | — | +| resizable | especifica si el ancho de la columna puede ser redimensionado, funciona cuando `border` de `el-table` está en `true` | boolean | — | false | +| formatter | función que formatea el contenido de la celda | Function(row, column, cellValue) | — | — | +| show-overflow-tooltip | especifica si el _tooltip_ debe ocultarse o mostrarse al hacer _hover_ en la celda | boolean | — | false | +| align | alineación | string | left/center/right | left | +| header-align | alineación de la cabecera de la tabla. Si se omite, se aplicará el valor del atributo anterior. | String | left/center/right | — | +| class-name | nombre de clase de la celda en la columna | string | — | — | +| label-class-name | nombre de clase de la etiqueta de esta columna | string | — | — | +| selectable | función que determina si una cierta fila puede ser seleccionada, funciona cuando `type` esta en `selection` | Function(row, index) | — | — | +| reserve-selection | especifica si se reserva la selección después de actualizar los datos, funciona cuando `type` está en `selection` | boolean | — | false | +| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — | +| filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — | +| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true | +| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row) | — | — | +| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — | diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md new file mode 100644 index 000000000..cc7674754 --- /dev/null +++ b/examples/docs/es/tabs.md @@ -0,0 +1,394 @@ + + +## Tabulación + +Divide colecciones de datos que están relacionados pero pertenecen a diferentes tipos. + +### Uso básico + +Tabulación básica y concisa + +:::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 + + +``` +::: + +### Estilo de Tarjeta + +Pestañas diseñadas como tarjetas. + +:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta. + +```html + + +``` +::: + +### Tarjeta con Bordes + +Pestañas de tarjeta con bordes. + +:::demo Establecer `type` a `border-card`. + +```html + + User + Config + Role + Task + +``` + +::: + +### Posición de tabulación + +Es posible usar el atributo `tab-position` para establecer la posición de la tabulación. + +:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"` + +```html + + +``` +::: + +### Pestaña Personalizada + +Es posible usar slots con nombre para personalizar el contenido de la etiqueta de la pestaña. + +:::demo +```html + + + Route + Route + + Config + Role + Task + +``` +::: + +### Agregar y cerrar pestaña + +Solo las pestañas de tipo tarjeta soportan adición y cierre. + +:::demo +```html + + + {{item.content}} + + + +``` +::: + +### Botón disparador personalizado de la nueva pestaña + +:::demo +```html +
+ + add tab + +
+ + + {{item.content}} + + + +``` +::: + +### Atributos de Pestañas +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------ | ------------------------------------ | ------- | --------------------- | --------------------------- | +| type | tipo de Pestaña | string | card/border-card | — | +| closable | si la Pestaña es cerrable | boolean | — | false | +| addable | si la Pestaña es añadible | boolean | — | false | +| editable | si la Pestaña es añadible y cerrable | boolean | — | false | +| value | nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña | +| tab-position | posición de tabulación | string | top/right/bottom/left | top | + +### Eventos de Pestañas +| Nombre de Evento | Descripción | Parámetros | +| ---------------- | ---------------------------------------- | ----------------------------- | +| tab-click | se lanza cuando se hace click a una pestaña | pestaña clickeada | +| tab-remove | se lanza cuando se hace click al botón tab-remove | nombre de la pestaña removida | +| tab-add | se lanza cuando se hace click al botón tab-add | — | +| edit | se lanza cuando los botones de tab-add y/o tab-remove son clickeados | (targetName, action) | + +### Attributos del Tab-pane +| Atributo | Descripción | Tipo | Valores Aceptados | Default | +| -------- | ---------------------------------------- | ------- | ----------------- | ---------------------------------------- | +| label | título de la pestaña | string | — | — | +| 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' | +| closable | si el Tab es cerrable | boolean | — | false | diff --git a/examples/docs/es/tag.md b/examples/docs/es/tag.md new file mode 100644 index 000000000..f62644806 --- /dev/null +++ b/examples/docs/es/tag.md @@ -0,0 +1,215 @@ + + + + +## Tag + +Se utiliza para marcar y seleccionar. + +### Uso básico + +::: demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta. + +```html +Tag One +Tag Two +Tag Three +Tag Four +Tag Five +``` +::: + +### Etiqueta removible + +:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida. + +```html + + {{tag.name}} + + + +``` +::: + +### Editar dinámicamente + +Puede utilizar el evento `close` para añadir y eliminar etiquetas dinámicamente. + +:::demo +```html + + {{tag}} + + + ++ New Tag + + + + +``` +::: + +### Tamaños + +Además del tamaño predeterminado, el componente Tag proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios. + +:::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`. + +```html +Default +Medium +Small +Mini +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- | +| type | tema | string | success/info/warning/danger | — | +| closable | si el Tag puede ser removido | boolean | — | false | +| disable-transitions | si se deshabilitan las animaciones | boolean | — | false | +| hit | si el Tag tiene un borde resaltado | boolean | — | false | +| color | color de fondo del Tag | string | — | — | +| size | tamaño del Tag | string | medium / small / mini | — | + + +### Eventos +| Nombre | Descripción | Parametros | +| ------ | ------------------------------------ | ---------- | +| close | se disoara cuando el Tag es removido | — | \ No newline at end of file diff --git a/examples/docs/es/time-picker.md b/examples/docs/es/time-picker.md new file mode 100644 index 000000000..b9470954a --- /dev/null +++ b/examples/docs/es/time-picker.md @@ -0,0 +1,216 @@ + + +## Selector de Tiempo + +Use el Time Picker para input de tipo time. + +### Selector de tiempo fijo + +Provee una lista de tiempo fijo para que los usuarios escogan. + +:::demo Use el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`. +```html + + + + +``` +::: + +### Selector de tiempo arbitrario + +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. + +```html + + + +``` +::: + +### Rango de tiempo fijo + +Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente. + +:::demo +```html + + + +``` +::: + +### Rango de tiempo arbitrario + +Es posible escoger un rango de tiempo arbitrario. + +:::demo Es posible seleccionar un rango de tiempo al añadir el atributo `is-range`. También, `arrow-control` es soportado en modo de rango. +```html + + + +``` +::: + + + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ----------- | +| 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 | si es posible escoger un rango de tiempo, solo funciona con `` | boolean | — | false | +| arrow-control | si es posible escoger el tiempo usando los botones de flecha, solo funciona con `` | 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 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 Time Picker, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — | +| name | como `name` en input nativo | string | — | — | + +### Opciones para Time Picker +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ------ | ----------------- | ----------- | +| start | tiempo de inicio | string | — | 09:00 | +| end | tiempo de finalización | string | — | 18:00 | +| step | salto de tiempo | string | — | 00:30 | +| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 | +| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — | + +### Opciones para Time Picker +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------------- | ---------------------------------------- | -------------- | ----------------------------------- | ----------- | +| selectableRange | rango de tiempo disponible p.ej. `'18:30:00 - 20:30:00'`ó`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — | +| format | formato para el selector | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | + + +### Eventos +| Nombre de Evento | Descripción | Parámetros | +| ---------------- | ---------------------------------------- | ----------------------------- | +| change | se lanza cuando el usuario confirma el valor | valor limitado del componente | +| blur | se lanza cuando el input se difumina | (event: Event) | +| focus | se lanza cuando el input se enfoca | (event: Event) | diff --git a/examples/docs/es/tooltip.md b/examples/docs/es/tooltip.md new file mode 100644 index 000000000..13798d012 --- /dev/null +++ b/examples/docs/es/tooltip.md @@ -0,0 +1,243 @@ + + + + +## Tooltip + +Mostrar aviso de información con el hover del mouse. + +### Uso básico + +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. +```html +
+
+ + top-start + + + top + + + top-end + +
+
+ + left-start + + + left + + + left-end + +
+ +
+ + right-start + + + right + + + right-end + +
+
+ + bottom-start + + + bottom + + + bottom-end + +
+
+ + +``` +::: + + +### Tema + +Tooltip tiene dos temas: `dark` and `light`. + +:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`. +```html + + Dark + + + Light + +``` +::: + +### Más Contenido + +Despliegue múltiples líneas de texto y establezca su formato. + +:::demo Sobre-escribiba el atributo `content` del `el-tooltip` añadiendo un slot llamado `content`. +```html + +
multiple lines
second line
+ Top center + +``` +::: + +### Uso Avanzado + +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 `el-fade-in-linear`. + +el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`. + +De hecho, Tooltip es una extension basada en [Vue-popper](https://github.com/element-component/vue-popper), es posible utilizar cualquier atributo permitido en Vue-popper. + +:::demo +```html + + + +``` +::: + + +:::tip +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). +Es necesario envolver los elementos de forma deshabilitados en un elemento contenedor para que Tooltipo funcione. +::: + + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------------- | ---------------------------------------- | ------- | ---------------------------------------- | ---------------------------------------- | +| 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 | +| value(v-model) | visibilidad del Tooltip | boolean | — | false | +| 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 | 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 | 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 | si el mouse puede entrar al Tooltip | Boolean | — | true | +| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 | diff --git a/examples/docs/es/transfer.md b/examples/docs/es/transfer.md new file mode 100644 index 000000000..ca569283b --- /dev/null +++ b/examples/docs/es/transfer.md @@ -0,0 +1,286 @@ + + + + +## Transfer + +### Uso básico +:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quiere que la lista destino esté vacía inicialmente puede inicializar el `v-model` con un array. +```html + + + +``` +::: + +### Filtrar + +Puede buscar y filtrar los items. + +::demo Ponga el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puede implementar su propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda. +```html + + + +``` +::: + +### Personalizable + +Puede personalizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie. + +:::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 + + + + + +``` +::: + +### Prop con 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 tiene que añadir alias para `key` y `label`. +```html + + + +``` +::: + +### Atributos +| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto | +| --------------------- | ---------------------------------------- | ------------------------------- | ----------------- | ---------------------------------------- | +| data | Origen de datos | array[{ key, label, disabled }] | — | [ ] | +| filterable | Si se puede filtrar | boolean | — | false | +| filter-placeholder | Placeholder para el input del filtro | string | — | Enter keyword | +| filter-method | Método de filtrado | function | — | — | +| titles | Títulos de las listas | array | — | ['List 1', 'List 2'] | +| button-texts | Texto de los botones | array | — | [ ] | +| render-content | Función de renderizado | function(h, option) | — | — | +| format | Texto para el status en el header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } | +| 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 | — | [ ] | + +### Slot +| Nombre | Descripcion | +| ------------ | ---------------------------------------- | +| left-footer | Contenido del footer de la lista de la izquierda | +| right-footer | Contenido del footer de la lista de la derecha | + +### Eventos +| Nombre | Descripcion | Parametros | +| ------ | ---------------------------------------- | ---------------------------------------- | +| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha | + diff --git a/examples/docs/es/transition.md b/examples/docs/es/transition.md new file mode 100644 index 000000000..f3adc4d94 --- /dev/null +++ b/examples/docs/es/transition.md @@ -0,0 +1,178 @@ +## Transiciones incorporadas + +Puede usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition). + +### Fade + +:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`. +```html + + + + + +``` +::: + +### Zoom + +:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`. +```html + + + + + +``` +::: + + +### Colapsado +Para efectos de colapsado usar el componente `el-collapse-transition`. +:::demo +```html + + + + + +``` +::: + +### On demand + +```js +// fade/zoom +import 'element-ui/lib/theme-chalk/base.css'; +// colapsar +import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'; +import Vue from 'vue' + +Vue.component(CollapseTransition.name, CollapseTransition) +``` + + + + diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md new file mode 100644 index 000000000..3c407e7b7 --- /dev/null +++ b/examples/docs/es/tree.md @@ -0,0 +1,984 @@ + + + + +## Tree + +Muestra un conjunto de datos jerárquicos. + +### Uso básico + +Estructura básica de árbol. + +::: demo +```html + + + +``` +::: + +### Seleccionable + +Usado para la selección de nodos. + +::: demo Este ejemplo también muestra como cargar los datos de forma asíncrona. +```html + + + + +``` +::: + +### Nodos hoja en modo perezoso + +:::demo Los datos de un nodo no son cargados hasta que no es pinchado, así que el árbol no puede predecir si es una hoja. Por eso a cada nodo se le añade el botón de desplegar, y si el nodo es una hoja el botón desaparecerá al pinchar en él. También puede decirle al árbol que el nodo es una hoja de antemano, y así evita que muestre el botón de desplegar. +```html + + + + +``` +::: + +### Checkbox desactivados + +El checkbox de un nodo se puede poner como desactivado. + +::: demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar. +```html + + + + +``` +::: + +### Desplegado o seleccionado por defecto +Los nodos pueden estar desplegados o seleccionados por defecto. + +:::demo Utilice `default-expanded-keys` y `default-checked-keys` para establecer los nodos desplegados y seleccionados respectivamente. Tenga en cuenta que para que funcione es necesario que tengan `node-key`. Su valor es el nombre de una clave en el objeto data, y el valor de la clave debe ser único en todo el árbol. +```html + + + + +``` +::: + +### Seleccionando nodos + +::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario. +```html + + + +
+ get by node + get by key + set by node + set by key + reset +
+ + +``` +::: + +### Contenido personalizado en los nodos +El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto. + +::: demo Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente. +```html + + + + +``` +::: + +### Filtrado de nodos +Los nodos del árbol se pueden filtrar. + +:::demo Invoque el método `filter` de la instancia de Tree para filtrar los nodos. Su parametro es la palabra de filtrado. Tenga en cuenta que para que funcione es necesario `filter-node-method`, y su valor el método de filtrado. +```html + + + + + + + +``` +::: + +### Acordeón + +Solo puede ser expandido un nodo del mismo nivel a la vez. + +::: demo +```html + + + + +``` +::: + +### Atributos +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- | +| data | Datos del árbol | array | — | — | +| empty-text | Texto a mostrar cuando data es void | string | — | — | +| node-key | Identificador único en todo el árbol para los nodos | string | — | — | +| props | Opciones de configuración | object | — | — | +| load | Método para cargar los datos de subárboles | function(node, resolve) | — | — | +| render-content | Función de renderizado para los nodos | Function(h, { node, data, store } | — | — | +| highlight-current | Si el nodo actual está resaltado | boolean | — | false | +| default-expand-all | Expandir todos los nodos por defecto | boolean | — | false | +| expand-on-click-node | Si expandir o contraer un nodo al pincharlo, si es false solo se hará al pinchar en la flecha | — | true | - | +| auto-expand-parent | Expandir un nodo padre si el hijo está seleccionado | boolean | — | true | +| default-expanded-keys | Array de claves de los nodos expandidos inicialmente | array | — | — | +| show-checkbox | Si un nodo es seleccionable | boolean | — | false | +| check-strictly | El estado de seleccion de un nodo no afecta a sus padres o hijos, cuando `show-checkbox` es `true` | boolean | — | false | +| default-checked-keys | Array con claves de los nodos seleccionados inicialmente | array | — | — | +| filter-node-method | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node) | — | — | +| accordion | Si solo un nodo de cada nivel puede expandirse a la vez | boolean | — | false | +| indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 | + +### props +| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | +| -------- | ---------------------------------------- | ----------------------------- | ----------------- | ----------- | +| label | Especifica que clave del objecto nodo se utilizará como label | string, function(data, node) | — | — | +| children | Especifica que objeto del nodo se utiliza como subárbol | string, function(data, node) | — | — | +| isLeaf | Especifica si el nodo es una hoja | boolean, function(data, node) | — | — | + +### Métodos +`Tree` tiene los siguientes métodos, que devuelven el array de nodos seleccionados. +| Método | Descripción | Parámetros | +| ----------------- | ---------------------------------------- | ---------------------------------------- | +| filter | Filtra los nodos del árbol, los nodos filtrados estarán ocultos | Acepta un parámetro que será usado como primer parámetro para filter-node-method | +| updateKeyChildren | Asocia un nuevo dato al nodo, solo funciona si `node-key` está asignado | (key, data)Acepta dos parámetros: 1. clave del nodo 2. nuevo dato | +| getCheckedNodes | Si los nodos puede ser seleccionado (`show-checkbox` es `true`), devuelve el array de nodos seleccionados | Acepta un booleano cuyo valor por defecto es `false` | +| setCheckedNodes | Establece algunos nodos como seleccionados, solo funciona cuando `node-key` está asignado | Un array de nodos a seleccionar | +| getCheckedKeys | Si los nodos pueden ser seleccionados (`show-checkbox` es `true`), devuelve un array con las claves de los nodos seleccionados | (leafOnly) Acepta un booleano que por defecto es `false`. | +| setCheckedKeys | Establece algunos nodos como seleccionados, solo si `node-key` está asignado | (keys, leafOnly) Acepta dos parametros: 1. un array de claves 2. un booleano cuyo valor por defecto es `false`. Si el parámetro es `true`, solo devuelve los nodos seleccionados | +| setChecked | Establece si un nodo está seleccionado, solo funciona si `node-key` esta asignado | (key/data, checked, deep) Acepta tres parámetros: 1. la clave o dato del nodo a ser seleccionado 2. un booleano que indica si un nodo el nodo estará seleccionado 3. un booleanoque indica si se hará en profundidad | +| getCurrentKey | devuelve la clave del nodo resaltado actualmente (null si no hay ninguno) | — | +| getCurrentNode | devuelve el nodo resaltado (null si no hay ninguno) | — | +| setCurrentKey | establece el nodo resaltado por la clave, solo funciona si `node-key` está asignado | (key) la clave del nodo a ser resaltado | +| setCurrentNode | establece el nodo resaltado, solo funciona si `node-key` está asignado | (node) nodo a ser resaltado | + +### Eventos +| Nombre del evento | Descripción | Parámetros | +| ----------------- | ---------------------------------------- | ---------------------------------------- | +| node-click | se lanza cuando un nodo es pinchado | tres parámetros: el objeto del nodo seleccionado, propiedad `node` de TreeNode y el TreeNode en si | +| check-change | se lanza cuando el estado de selección del nodo cambia | tres parámetros: objeto nodo que se corresponde con el que ha cambiado, booleano que dice si esta seleccionado, booleano que dice si el nodo tiene hijos seleccionados | +| current-change | cambia cuando el nodo actual cambia | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode | +| node-expand | se lanza cuando el nodo actual se abre | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si | +| node-collapse | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si | diff --git a/examples/docs/es/typography.md b/examples/docs/es/typography.md new file mode 100644 index 000000000..342de2f93 --- /dev/null +++ b/examples/docs/es/typography.md @@ -0,0 +1,151 @@ + + +## Tipografía + +Creamos una convención de fuentes para asegurar la mejor presentación en diferentes plataformas. + +### Fuente en chino + +
+ 和畅惠风 +
PingFang SC
+
+
+ 和畅惠风 +
Hiragino Sans GB
+
+
+ 和畅惠风 +
Microsoft YaHei
+
+ +### Inglés / Fuente Numérica + +
+ RGag +
Helvetica Neue
+
+
+ RGag +
Helvetica
+
+
+ RGag +
Arial
+
+ +### Font-family + +```css +font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; +``` + +### Convención de fuentes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Main TitleBuild with Element20px Extra large
TitleBuild with Element18px large
Small TitleBuild with Element16px Medium
BodyBuild with Element14px Small
Body (small)Build with Element13px Extra Small
Supplementary textBuild with Element12px Extra Extra Small
+ diff --git a/examples/docs/es/upload.md b/examples/docs/es/upload.md new file mode 100644 index 000000000..8c4da15f3 --- /dev/null +++ b/examples/docs/es/upload.md @@ -0,0 +1,426 @@ + + + +## Carga de archivos + +Carga archivos haciendo clic o arrastrándolos. + +### Clic para cargar archivos + +:::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 + + Clic para subir archivo +
Solo archivos jpg/png con un tamaño menor de 500kb
+ + +``` +::: + +### Cargar avatar de usuario + +Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño. + +::: demo +```html + + + + + + + + +``` +::: + +### Pared de fotografías + +Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos. + +::: demo +```html + + + + + + + +``` +::: + +### Lista de archivos con miniatura + +::: demo +```html + + Clic para subir archivo +
Solo archivos jpg/png con un tamaño menor de 500kb
+ + +``` +::: + +### Control de lista de archivos + +Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos. + +::: demo +```html + + Clic para subir archivo +
Solo archivos jpg/png con un tamaño menor de 500kb
+ + +``` +::: + +### Arrastrar para cargar archivo + +Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo. + +::: demo +```html + + +
Suelta tu archivo aquí o haz clic para cargar
+
Solo archivos jpg/png con un tamaño menor de 500kb
+ +``` +::: + +### Carga normal + +::: demo +```html + + Selecciona un archivo + Cargar al servidor +
Solo archivos jpg/png con un tamaño menor de 500kb
+ + +``` +::: + +### 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 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) | — | - | + +### Métodos +| Nombre del método | Descripción | Parametros | +| ----------------- | ---------------------------------------- | ------------------------- | +| clearFiles | limpia la lista de archivos cargados (este método no esta soportado en el _hook_ `before-upload`) | — | +| abort | cancela la petición de carga | （ file: fileList's item ） | diff --git a/examples/i18n/component.json b/examples/i18n/component.json index 516007160..0563c8a38 100644 --- a/examples/i18n/component.json +++ b/examples/i18n/component.json @@ -60,5 +60,36 @@ "nav": { "dropdown": "Version: " } + }, + { + "lang": "es", + "demo-block": { + "hide-text": "Ocultar", + "show-text": "Mostrar", + "button-text": "Probar", + "tooltip-text": "Prueba este ejemplo en jsfiddle.net" + }, + "footer": { + "links": "Enlaces", + "repo": "GitHub", + "community": "Comunidad", + "changelog": "Lista de cambios", + "theme": "Generador de temas por CLI", + "preview": "Generador de temas en línea", + "faq": "FAQ", + "gitter": "Gitter", + "starter": "Kit de inicio", + "feedback": "Comentarios", + "contribution": "Contribución", + "eleme": "Eleme" + }, + "header": { + "guide": "Guía", + "components": "Componentes", + "resource": "Recursos" + }, + "nav": { + "dropdown": "Versión: " + } } ] diff --git a/examples/i18n/page.json b/examples/i18n/page.json index d9321a056..888a99189 100644 --- a/examples/i18n/page.json +++ b/examples/i18n/page.json @@ -3,9 +3,6 @@ "lang": "zh-CN", "pages": { "index": { - "lang": "zh-CN", - "titleSize": "34", - "paraSize": "18", "1": "网站快速成型工具", "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库", "3": "指南", @@ -14,7 +11,10 @@ "6": "组件", "7": "使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。", "8": "资源", - "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。" + "9": "下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。", + "lang": "zh-CN", + "titleSize": "34", + "paraSize": "18" }, "component": {}, "changelog": { @@ -76,9 +76,6 @@ "15": "适用于导航较少，页面篇幅较长的网站。" }, "resource": { - "paraHeight": "1.8", - "placeholder1": "整理中", - "placeholder2": "设计资源正在整理和完善中", "1": "资源", "2": "整理中", "3": "Axure Components", @@ -87,7 +84,10 @@ "6": "Sketch Template", "7": "从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格", "8": "组件交互文档", - "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节" + "9": "进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节", + "paraHeight": "1.8", + "placeholder1": "整理中", + "placeholder2": "设计资源正在整理和完善中" } } }, @@ -95,12 +95,6 @@ "lang": "en-US", "pages": { "index": { - "lang": "en-US", - "titleSize": "34", - "paraSize": "18", - "theatreParam": "{ maxSpeed: 100 }", - "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", - "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)", "1": "A Desktop UI Library", "2": "Element, a Vue 2.0 based component library for developers, designers and product managers", "3": "Guide", @@ -109,7 +103,13 @@ "6": "Component", "7": "Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.", "8": "Resource", - "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency." + "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.", + "lang": "en-US", + "titleSize": "34", + "paraSize": "18", + "theatreParam": "{ maxSpeed: 100 }", + "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", + "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)" }, "component": {}, "changelog": { @@ -171,9 +171,6 @@ "15": "Suitable for sites with few navigations and large chunks." }, "resource": { - "paraHeight": "1.6", - "placeholder1": "Under construction", - "placeholder2": "Please wait while we prepare the design resources", "1": "Resource", "2": "Under construction.", "3": "Axure Components", @@ -182,7 +179,105 @@ "6": "Sketch Template", "7": "Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.", "8": "Interaction Design Documentation", - "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective." + "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.", + "paraHeight": "1.6", + "placeholder1": "Under construction", + "placeholder2": "Please wait while we prepare the design resources" + } + } + }, + { + "lang": "es", + "pages": { + "index": { + "1": "Un kit de interfaz de usuario para la web", + "2": "Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto", + "3": "Guía", + "4": "Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.", + "5": "Ver detalle", + "6": "Componentes", + "7": "Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.", + "8": "Recursos", + "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.", + "lang": "es", + "titleSize": "34", + "paraSize": "18", + "theatreParam": "{ maxSpeed: 100 }", + "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", + "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)" + }, + "component": {}, + "changelog": { + "1": "Lista de cambios", + "2": "en-US" + }, + "design": { + "1": "Disciplinas de diseño", + "2": "Consistencia", + "3": "", + "4": "Comentarios", + "5": "", + "6": "Eficiencia", + "7": "", + "8": "Control", + "9": "", + "10": "Consistencia", + "11": "Consistente con la vida real: ", + "12": "en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.", + "13": "Consistente dentro de la interfaz: ", + "14": "todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.", + "15": "Comentarios", + "16": "Comentarios sobre la operación: ", + "17": "Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.", + "18": "Comentarios visuales: ", + "19": "Refleja el estado actual al actualizar o reorganizar los elementos de la página.", + "20": "Eficiencia", + "21": "Simplifica el proceso: ", + "22": "Mantiene el proceso operativo simple e intuitivo.", + "23": "Bien definido y claro: ", + "24": "Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.", + "25": "Fácil de identificar: ", + "26": "La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.", + "27": "Control", + "28": "Toma de decisiones: ", + "29": "Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.", + "30": "Consecuencias controladas: ", + "31": "Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales." + }, + "guide": { + "1": "Disciplinas de diseño", + "2": "Navegación" + }, + "nav": { + "1": "Navegación", + "2": "La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.", + "3": "Elige la navegación correcta", + "4": "Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.", + "5": "Navegación lateral", + "6": "Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.", + "7": "Categorías de Nivel 1", + "8": "Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.", + "9": "Categorías de Nivel 2", + "10": "La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.", + "11": "Categorías de Nivel 3", + "12": "Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.", + "13": "Navegación superior", + "14": "Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.", + "15": "Adecuado para sitios con pocas navegaciones y grandes trozos." + }, + "resource": { + "1": "Recursos", + "2": "En construcción", + "3": "Componetes de Axure", + "4": "Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.", + "5": "Descarga", + "6": "Plantilla de Sketch", + "7": "Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.", + "8": "Documentación de diseño de interacción", + "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.", + "paraHeight": "1.6", + "placeholder1": "En construcción", + "placeholder2": "Por favor espere mientras preparamos los recursos de diseño" } } } diff --git a/examples/i18n/route.json b/examples/i18n/route.json index d9e7749ff..ad93c4a3c 100644 --- a/examples/i18n/route.json +++ b/examples/i18n/route.json @@ -4,5 +4,8 @@ }, { "lang": "en-US" + }, + { + "lang": "es" } ] diff --git a/examples/i18n/title.json b/examples/i18n/title.json index 38eda0f8e..91e57f36e 100644 --- a/examples/i18n/title.json +++ b/examples/i18n/title.json @@ -10,5 +10,11 @@ "guide": "Guide | Element", "component": "Component | Element", "resource": "Resource | Element" + }, + "es": { + "home": "Element - Un kit de interfaz de usuario para la web", + "guide": "Guía | Element", + "component": "Componentes | Element", + "resource": "Recursos | Element" } } diff --git a/examples/nav.config.json b/examples/nav.config.json index 487595f2d..aab522596 100644 --- a/examples/nav.config.json +++ b/examples/nav.config.json @@ -498,5 +498,255 @@ } ] } + ], + "es": [ + { + "name": "Changelog-es", + "path": "/changelog" + }, + { + "name": "Element React", + "href": "https://eleme.github.io/element-react/" + }, + { + "name": "Element Angular", + "href": "https://eleme.github.io/element-angular/" + }, + { + "name": "Development", + "children": [ + { + "path": "/installation", + "name": "Installation-es" + }, + { + "path": "/quickstart", + "name": "Quick Start-es" + }, + { + "path": "/i18n", + "name": "Internationalization-es" + }, + { + "path": "/custom-theme", + "name": "Custom Theme-es" + }, + { + "path": "/transition", + "name": "Built-in transition-es" + } + ] + }, + { + "name": "Components", + "groups": [ + { + "groupName": "Basic", + "list": [ + { + "path": "/layout", + "title": "Layout-es" + }, + { + "path": "/container", + "title": "Layout Container-es" + }, + { + "path": "/color", + "title": "Color-es" + }, + { + "path": "/typography", + "title": "Typography-es" + }, + { + "path": "/icon", + "title": "Icon-es" + }, + { + "path": "/button", + "title": "Button-es" + } + ] + }, + { + "groupName": "Form", + "list": [ + { + "path": "/radio", + "title": "Radio-es" + }, + { + "path": "/checkbox", + "title": "Checkbox-es" + }, + { + "path": "/input", + "title": "Input-es" + }, + { + "path": "/input-number", + "title": "InputNumber-es" + }, + { + "path": "/select", + "title": "Select-es" + }, + { + "path": "/cascader", + "title": "Cascader-es" + }, + { + "path": "/switch", + "title": "Switch-es" + }, + { + "path": "/slider", + "title": "Slider-es" + }, + { + "path": "/time-picker", + "title": "TimePicker-es" + }, + { + "path": "/date-picker", + "title": "DatePicker-es" + }, + { + "path": "/datetime-picker", + "title": "DateTimePicker-es" + }, + { + "path": "/upload", + "title": "Upload-es" + }, + { + "path": "/rate", + "title": "Rate-es" + }, + { + "path": "/color-picker", + "title": "ColorPicker-es" + }, + { + "path": "/transfer", + "title": "Transfer-es" + }, + { + "path": "/form", + "title": "Form-es" + } + ] + }, + { + "groupName": "Data", + "list": [ + { + "path": "/table", + "title": "Table-es" + }, + { + "path": "/tag", + "title": "Tag-es" + }, + { + "path": "/progress", + "title": "Progress-es" + }, + { + "path": "/tree", + "title": "Tree-es" + }, + { + "path": "/pagination", + "title": "Pagination-es" + }, + { + "path": "/badge", + "title": "Badge-es" + } + ] + }, + { + "groupName": "Notice", + "list": [ + { + "path": "/alert", + "title": "Alert-es" + }, + { + "path": "/loading", + "title": "Loading-es" + }, + { + "path": "/message", + "title": "Message-es" + }, + { + "path": "/message-box", + "title": "MessageBox-es" + }, + { + "path": "/notification", + "title": "Notification-es" + } + ] + }, + { + "groupName": "Navigation", + "list": [ + { + "path": "/menu", + "title": "NavMenu-es" + }, + { + "path": "/tabs", + "title": "Tabs-es" + }, + { + "path": "/breadcrumb", + "title": "Breadcrumb-es" + }, + { + "path": "/dropdown", + "title": "Dropdown-es" + }, + { + "path": "/steps", + "title": "Steps-es" + } + ] + }, + { + "groupName": "Others", + "list": [ + { + "path": "/dialog", + "title": "Dialog-es" + }, + { + "path": "/tooltip", + "title": "Tooltip-es" + }, + { + "path": "/popover", + "title": "Popover-es" + }, + { + "path": "/card", + "title": "Card-es" + }, + { + "path": "/carousel", + "title": "Carousel-es" + }, + { + "path": "/collapse", + "title": "Collapse-es" + } + ] + } + ] + } ] } diff --git a/examples/pages/es/changelog.vue b/examples/pages/es/changelog.vue new file mode 100644 index 000000000..241cc0d72 --- /dev/null +++ b/examples/pages/es/changelog.vue @@ -0,0 +1,188 @@ + + + diff --git a/examples/pages/es/component.vue b/examples/pages/es/component.vue new file mode 100644 index 000000000..3629a7e84 --- /dev/null +++ b/examples/pages/es/component.vue @@ -0,0 +1,288 @@ + + + diff --git a/examples/pages/es/design.vue b/examples/pages/es/design.vue new file mode 100644 index 000000000..fb9717b74 --- /dev/null +++ b/examples/pages/es/design.vue @@ -0,0 +1,82 @@ + + diff --git a/examples/pages/es/guide.vue b/examples/pages/es/guide.vue new file mode 100644 index 000000000..ffbe6cc10 --- /dev/null +++ b/examples/pages/es/guide.vue @@ -0,0 +1,91 @@ + + + diff --git a/examples/pages/es/index.vue b/examples/pages/es/index.vue new file mode 100644 index 000000000..63d838d64 --- /dev/null +++ b/examples/pages/es/index.vue @@ -0,0 +1,323 @@ + + + diff --git a/examples/pages/es/nav.vue b/examples/pages/es/nav.vue new file mode 100644 index 000000000..72db37ec2 --- /dev/null +++ b/examples/pages/es/nav.vue @@ -0,0 +1,166 @@ + + + diff --git a/examples/pages/es/resource.vue b/examples/pages/es/resource.vue new file mode 100644 index 000000000..c34ebc483 --- /dev/null +++ b/examples/pages/es/resource.vue @@ -0,0 +1,160 @@ + + diff --git a/examples/route.config.js b/examples/route.config.js index cbf214491..233103355 100644 --- a/examples/route.config.js +++ b/examples/route.config.js @@ -11,6 +11,11 @@ const LOAD_MAP = { return r => require.ensure([], () => r(require(`./pages/en-US/${name}.vue`)), 'en-US'); + }, + 'es': name => { + return r => require.ensure([], () => + r(require(`./pages/es/${name}.vue`)), + 'es'); } }; @@ -28,6 +33,11 @@ const LOAD_DOCS_MAP = { return r => require.ensure([], () => r(require(`./docs/en-US${path}.md`)), 'en-US'); + }, + 'es': path => { + return r => require.ensure([], () => + r(require(`./docs/es${path}.md`)), + 'es'); } }; @@ -134,6 +144,8 @@ let userLanguage = localStorage.getItem('ELEMENT_LANGUAGE') || window.navigator. let defaultPath = '/en-US'; if (userLanguage.indexOf('zh-') !== -1) { defaultPath = '/zh-CN'; +} else if (userLanguage.indexOf('es') !== -1) { + defaultPath = '/es'; } route = route.concat([{