Skip to content

E
Element
Commit 8d6950fa authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

Merge branch 'es-doc' into es-doc

parents 83f05369 cb9a1cb3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1922 additions and 1404 deletions
.eslintrc
View file @ 8d6950fa
......@@ -6,7 +6,7 @@
"expect": true,
"sinon": true
},
"plugins": ['vue'],
"plugins": ['vue','json'],
"extends": 'elemefe',
"parserOptions": {
"ecmaFeatures": {
......
.github/CONTRIBUTING.en-US.md
View file @ 8d6950fa
......@@ -8,7 +8,7 @@ We are excited that you are interested in contributing to Element. Before submit
## Issue Guidelines
- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/ElemeFE/element) for help.
- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/element-en/Lobby) for help.
- Before submitting an issue, please check if similar problems have already been issued.
......
CHANGELOG.en-US.md
View file @ 8d6950fa
## Changelog
### 2.0.4
*2017-11-10*
- Improved accessibility for Cascader, Dropdown, Message, Notification, Popover, Tooltip and Tree
- Fixed Container resize when the width of viewport decreases, #8042
- Fixed Tree's `updateKeyChildren` incorrectly deleting child nodes, #8100
- Fixed bordered CheckboxButton's height when nested in a Form, #8100
- Fixed Menu's parsing error for custom colors, #8153 (by @zhouyixiang)
### 2.0.3
*2017-11-03*
......
CHANGELOG.zh-CN.md
View file @ 8d6950fa
## 更新日志
### 2.0.4
*2017-11-10*
- 提升 Cascader、Dropdown、Message、Notification、Popover、Tooltip、Tree 的可访问性
- 修复当视口变窄时 Container 无法同步更新其宽度的问题，#8042
- 修复 Tree 的 `updateKeyChildren` 在删除子节点时的行为错误，#8100
- 修复带有边框的 CheckboxButton 在 Form 中高度错误的问题，#8100
- 修复 Menu 在解析自定义颜色时的错误，#8153（by @zhouyixiang）
### 2.0.3
*2017-11-03*
......
FAQ.md
View file @ 8d6950fa
......@@ -36,27 +36,6 @@
请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
</details>
<details>
<summary>如何使用第三方图标库？</summary>
只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加：
```css
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中：
```html
<el-input icon="my-xxx" />
```
</details>
<details>
<summary>所有组件的任意属性都支持 `.sync` 修饰符吗？</summary>
......@@ -129,27 +108,6 @@ The parameter `row` is the data object of corresponding row.
Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
</details>
<details>
<summary>How do I use third-party icon font library with Element?</summary>
You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS:
```css
[class^="el-icon-my"], [class*=" el-icon-my"] {
font-family:"your-font-family" !important;
/* The following is based on original CSS rules of third-party library */
font-size: inherit;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
Now you can use them as you do with built-in icons. For example, in `el-input`:
```html
<el-input icon="my-xxx" />
```
</details>
<details>
<summary>Can I use `.sync` modifier on every attribute?</summary>
......
examples/app.vue
View file @ 8d6950fa
......@@ -191,7 +191,6 @@
const lang = location.hash.replace('#', '').split('/')[1] || 'zh-CN';
const localize = lang => {
console.log(lang);
switch (lang) {
case 'zh-CN':
use(zhLocale);
......@@ -232,6 +231,7 @@
const preferGithub = localStorage.getItem('PREFER_GITHUB');
if (href.indexOf('element-cn') > -1 || preferGithub) return;
setTimeout(() => {
if (this.lang !== 'zh-CN') return;
this.$confirm('建议大陆用户访问部署在国内的站点，是否跳转？', '提示')
.then(() => {
location.href = location.href.replace('element.', 'element-cn.');
......@@ -249,12 +249,12 @@
this.suggestJump();
}
setTimeout(() => {
const notified = localStorage.getItem('RELEASE_NOTIFIED');
if (!notified) {
const notified = localStorage.getItem('ES_NOTIFIED');
if (!notified && this.lang !== 'zh-CN') {
const h = this.$createElement;
const title = this.lang === 'zh-CN'
? '2.0 正式发布'
: '2.0 available now';
? '帮助我们完成西班牙语文档'
: 'Help us with Spanish docs';
const messages = this.lang === 'zh-CN'
? ['点击', '这里', '查看详情']
: ['Click ', 'here', ' to learn more'];
......@@ -266,13 +266,13 @@
h('a', {
attrs: {
target: '_blank',
href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7755' : '7756' }`
href: 'https://github.com/ElemeFE/element/issues/8074'
}
}, messages[1]),
messages[2]
]),
onClose() {
localStorage.setItem('RELEASE_NOTIFIED', 1);
localStorage.setItem('ES_NOTIFIED', 1);
}
});
}
......
examples/docs/en-US/select.md
View file @ 8d6950fa
......@@ -101,6 +101,7 @@
value8: '',
value9: [],
value10: [],
value11: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
};
......@@ -320,7 +321,7 @@ You can clear Select using a clear icon.
Multiple select uses tags to display selected options.
:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options.
:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
```html
<template>
<el-select v-model="value5" multiple placeholder="Select">
......@@ -331,6 +332,20 @@ Multiple select uses tags to display selected options.
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value11"
multiple
collapse-tags
style="margin-left: 20px;"
placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
......@@ -650,6 +665,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | size of Input | string | large/small/mini | — |
| clearable | whether single select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| placeholder | placeholder | string | — | Select |
......
examples/docs/es/checkbox.md
View file @ 8d6950fa
This diff is collapsed.
examples/docs/es/collapse.md
View file @ 8d6950fa
......@@ -26,11 +26,11 @@
## Collapse
Use Collapse to store contents.
Use Collapse para almacenar contenidos.
### Basic usage
### Uso básico
You can expand multiple panels
Puedes expandir varios paneles
:::demo
```html
......@@ -65,11 +65,11 @@ You can expand multiple panels
```
:::
### Accordion
### Acordeón
In accordion mode, only one panel can be expanded at once
En modo acordeón sólo un panel puede ser expandido a la vez
:::demo Activate accordion mode using the `accordion` attribute.
:::demo Activa el modo acordeón usado el atributo `accordion`.
```html
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
......@@ -102,9 +102,9 @@ In accordion mode, only one panel can be expanded at once
```
:::
### Custom title
### Título personalizado
Besides using the `title` attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
Además de usar el atributo `title`, se puede personalizar el título del panel con named slots, esto hace posible agregar contenido personalizado, por ejemplo: iconos.
:::demo
```html
......@@ -133,19 +133,20 @@ Besides using the `title` attribute, you can customize panel title with named sl
```
:::
### Collapse Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de Collapse
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| accordion | whether to activate accordion mode | boolean | — | false |
| value | currently active panel | string (accordion mode)/array (non-accordion mode) | — | — |
| accordion | especifica si activa el modo acordeón | boolean | — | false |
| value | panel activo | string (modo acordeón)/array (No modo acordeón) | — | — |
### Collapse Events
| Event Name | Description | Parameters |
### Eventos de Collapse
| Nombre de Evento | Descripción | Parametros |
|---------|---------|---------|
| change | triggers when active panels change | activeNames: array (non-accordion mode)/string (accordion mode) |
| change | se dispara cuando los paneles activos cambian | activeNames: array (No modo acordeón)/string (modo acordeón) |
### Collapse Item Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de Collapse Item
| Atributo | Descripción | Tipo | Valores aceptados | Por Defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
\ No newline at end of file
| name | identificador único del panel | string/number | — | — |
| title | título del panel | string | — | — |
\ No newline at end of file
examples/docs/es/color-picker.md
View file @ 8d6950fa
......@@ -42,18 +42,18 @@
## ColorPicker
ColorPicker is a color selector supporting multiple color formats.
ColorPicker es un selector de color que soporta varios formatos de color.
### Basic usage
### Uso básico
:::demo ColorPicker requires a string typed variable to be bound to v-model.
:::demo ColorPicker requiere una variable de tipo string para ser enlazada a v-model.
```html
<div class="block">
<span class="demonstration">With default value</span>
<span class="demonstration">Especifica valor por defecto</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">With no default value</span>
<span class="demonstration">No especifica valor por defecto</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
......@@ -72,7 +72,7 @@ ColorPicker is a color selector supporting multiple color formats.
### Alpha
:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the `show-alpha` attribute.
:::demo ColorPicker soporta selección de canales alpha. Para activarlo sólo agrega el atributo `show-alpha`.
```html
<el-color-picker v-model="color3" show-alpha></el-color-picker>
......@@ -109,17 +109,17 @@ ColorPicker is a color selector supporting multiple color formats.
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
| 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 | — | — |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre de Evento | Descripción | Parametros |
|---------|--------|---------|
| change | triggers when input value changes | color value |
| active-change | triggers when the current active color changes | active color value |
\ No newline at end of file
| 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 |
\ No newline at end of file
examples/docs/es/container.md
View file @ 8d6950fa
......@@ -9,7 +9,7 @@
color: #333;
}
#common-layouts + .demo-container {
#disenos-comunes + .demo-container {
.el-header, .el-footer {
text-align: center;
}
......@@ -57,76 +57,78 @@
};
</script>
## Container
Container components for scaffolding basic structure of the page:
## Contenedor
Componentes contenedores para iniciar una estructura básica de un sitio:
`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
`<el-container>`: Contenedor. Cuando este elemento se anida con un `<el-header>` o `<el-footer>`, todos los elementos secundarios se organizan verticalmente.
De lo contrario, de forma horizontal.
`<el-header>`: container for headers.
`<el-header>`: Contenedor para cabeceras.
`<el-aside>`: container for side sections (usually a side nav).
`<el-aside>`: Contenedor para secciones laterales (generalmente, una barra lateral).
`<el-main>`: container for main sections.
`<el-main>`: Contenedor para sección principal.
`<el-footer>`: container for footers.
`<el-footer>`: Contenedor para pie de página.
:::tip
These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
Estos componentes utilizan flex para el diseño, así que asegúrate que el navegador lo soporte. Además, los elementos directos de `<el-container>` tienen que
ser uno o más de los últimos cuatro componentes. Y el elemento padre de los últimos cuatro componentes debe ser un `<el-container>`.
:::
### Common layouts
### Diseños comunes
::: demo
```html
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
<el-aside width="200px">Barra lateral</el-aside>
<el-main>Principal</el-main>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-header>Cabecera</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
<el-aside width="200px">Barra lateral</el-aside>
<el-main>Principal</el-main>
</el-container>
</el-container>
<el-container>
<el-header>Header</el-header>
<el-header>Cabecera</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-aside width="200px">Barra lateral</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-aside width="200px">Barra lateral</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
</el-container>
</el-container>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-aside width="200px">Barra lateral</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
<el-header>Cabecera</el-header>
<el-main>Principal</el-main>
<el-footer>Pie de página</el-footer>
</el-container>
</el-container>
......@@ -168,7 +170,7 @@ These components use flex for layout, so please make sure your browser supports
```
:::
### Example
### Ejemplo
::: demo
```html
......@@ -278,22 +280,22 @@ These components use flex for layout, so please make sure your browser supports
```
:::
### Container Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de contenedor
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
| 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 |
### Header Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de cabecera
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the header | string | — | 60px |
| height | altura de la cabecera | string | — | 60px |
### Aside Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de barra lateral
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| width | width of the side section | string | — | 300px |
| width | ancho de la barra lateral | string | — | 300px |
### Footer Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de pie de página
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| height | height of the footer | string | — | 60px |
\ No newline at end of file
| height | altura del pie de página | string | — | 60px |
\ No newline at end of file
examples/docs/es/custom-theme.md
View file @ 8d6950fa
## Custom theme
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
## Tema personalizado
Element utiliza la metodología BEM en CSS con la finalidad de que puedas sobrescribir los estilos fácilmente. Pero, si necesitas remplazar estilos a gran escala, por ejemplo, cambiar el color del tema de azul a naranja o verde, quizás reemplazarlos uno a uno no sea lo más adecuado, por ello, te proporcionamos 3 maneras de modificar los estilos.
### Changing theme color
If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
### Cambiando el color del tema
Si lo que buscas es cambiar el color del tema de Element, se recomienda utilizar el [sitio de visualización de temas](https://elementui.github.io/theme-chalk-preview/#/en-US). Element utiliza un color azul brillante y amigable como tema principal. Al cambiarlo, puede hacer que Element este más conectado visualmente a proyectos específicos.
The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
Este sitio, te permitirá obtener una vista previa del tema con un nuevo color en tiempo real, y, además, obtener un paquete de estilos completo basado en el nuevo color para su descarga (para importar estos nuevos estilos, consulta la sección ‘Importar un tema personalizado’ o ‘Importar un tema de componente bajo demanda' que se encuentran dentro de esta sección).
### Update SCSS variables in your project
`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
### Actualizando variables SCSS en tu proyecto
`theme-chalk` esta escrito en SCSS. Si tu proyecto también utiliza SCSS, puedes cambiar las variables de estilos de Element. Para ello, solo necesitas crear un nuevo archivo de estilos, por ejemplo, `element-variables.scss`:
```html
/* theme color */
/* Color del tema */
$--color-primary: teal;
/* icon font path, required */
/* 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";
```
Then in the entry file of your project, import this style file instead of Element's built CSS:
Entonces, en el archivo principal del proyecto, importa este archivo de estilos en lugar de los estilos de Element:
```JS
import Vue from 'vue'
import Element from 'element-ui'
......@@ -29,29 +29,29 @@ Vue.use(Element)
```
:::tip
Note that it is required to override icon font path to the relative path of Element's font files.
Nota es necesario sobreescribir la ruta de la fuente por una ruta relativa de las fuentes de Element.
:::
### CLI theme tool
If you project doesn't use SCSS, you can customize themes with our CLI theme tool:
### CLI para generar temas
Si tu proyecto no utiliza SCSS, puedes personalizar el tema a través de esta herramienta:
#### <strong>Install</strong>
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
#### <strong>Instalación</strong>
Primero, debes instalar el generador de temas ya sea de forma global o local. Se recomienda instalarlo de forma local, ya que de esta manera, cuando otros clonen tu proyecto, npm automáticamente los instalará para ellos.
```shell
npm i element-theme -g
```
Then install the chalk theme from npm or GitHub.
Ahora, instala el tema `chalk` desde npm o Github.
```shell
# from npm
# desde npm
npm i element-theme-chalk -D
# from GitHub
# desde GitHub
npm i https://github.com/ElementUI/theme-chalk -D
```
#### <strong>Initialize variable file</strong>
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
#### <strong>Inicializar archivo de variables</strong>
Después de haber instalado correctamente los paquetes, el comando `et` estará disponible en tu CLI (si instalaste el paquete de manera local, utilizá `node_modules/.bin/et` en su lugar). Ejecuta `-i` para inicializar un archivo de variables, puedes especificar un nombre distinto, pero por defecto, el archivo se llama `element-variables.scss`. También puedes especificar un directorio distinto.
```shell
et -i [custom output file]
......@@ -59,7 +59,7 @@ et -i [custom output file]
> ✔ Generator variables file
```
In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format. Here's a snippet:
En el archivo `element-variables.scss` podrás encontrar todas las variables que utiliza Element para definir los estilos y estos están definidos en SCSS. Aquí un ejemplo:
```css
$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
......@@ -80,14 +80,14 @@ $--color-info: #878d99 !default;
...
```
#### <strong>Modify variables</strong>
Just edit `element-variables.scss`, e.g. changing the theme color to red:
#### <strong>Modificando variables</strong>
Solo debes modificar el archivo `element-variables.scss`, por ejemplo, para cambiar el color del tema a rojo:
```CSS
$--color-primary: red;
```
#### <strong>Build theme</strong>
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
#### <strong>Construyendo el tema</strong>
Después de haber modificado el archivo de variables, utilizaremos el comando `et` para construir nuestro tema. Puedes activar el modo `watch` agregando el parámetro `-w`. Y, si deseas personalizar el nombre del archivo, debes agregar el parámetro `-c` seguido del nombre.
```shell
et
......@@ -95,8 +95,8 @@ et
> ✔ build element theme
```
#### <strong>Import custom theme</strong>
By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
#### <strong>Importar un tema personalizado</strong>
Por defecto, el archivo de tema construido es colocado dentro de `./theme`. Tu puedes especificar un directorio distinto utilizando el parámetro `-o`. Importar tu propio tema es igual a como si importarás el tema por defecto, únicamente tienes que importar el archivo que se construyó:
```javascript
import '../theme/index.css'
......@@ -106,8 +106,8 @@ import Vue from 'vue'
Vue.use(ElementUI)
```
#### <strong>Import component theme on demand</strong>
If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
#### <strong>Importar un tema de componente bajo demanda</strong>
Si estas utilizando `babel-plugin-component` para importar bajo demanda, solo debes modificar el archivo `.babelrc` y especificar en la propiedad `styleLibraryName` la ruta en donde se encuentra localizado tu tema personalizado relativo a `.babelrc`. Nota el carácter `~` es obligatorio:
```json
{
"plugins": [["component", [
......@@ -119,4 +119,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba
}
```
If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
\ No newline at end of file
Si no estas familiarizado con `babel-plugin-component`, por favor dirígete a la documentación sobre <a href="./#/en-US/component/quickstart">Como Iniciar</a>. Para más detalles, consulta el [repositorio del proyecto](https://github.com/ElementUI/element-theme) de `element-theme`.
\ No newline at end of file
examples/docs/es/installation.md
View file @ 8d6950fa
## Installation
## Instalación
### npm
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
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
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
### CDN
Obten la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importa el JavaScript y los archivos CSS en tu página.
```html
<!-- import CSS -->
......@@ -17,12 +17,12 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
:::tip
We recommend our users to lock Element's version when using CDN. Please refer to [unpkg.com](https://unpkg.com) for more information.
:::
##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
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
Si estás usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html
<!DOCTYPE html>
......@@ -54,4 +54,5 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
</script>
</html>
```
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
Si estás usando npm y deseas combinarlo con webpack, por favor continúa a la siguiente página: Quick Start
examples/docs/es/layout.md
View file @ 8d6950fa
......@@ -31,13 +31,13 @@
## Layout
Quickly and easily create layouts with the basic 24-column.
Rápido y facilmente crea un layout básico con 24 columnas.
### Basic layout
### Layout básico
Create basic grid layout using columns.
Crea un layout básico usando columnas.
::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
:::**Demo** Con `row` y `col`, podemos facilmente manipular el layout usando el atributo `span`.
```html
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
......@@ -97,11 +97,11 @@ Create basic grid layout using columns.
```
:::
### Column spacing
### Espaciado de columnas
Column spacing is supported.
El espaciado de columnas está soportado.
::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
```html
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
......@@ -141,11 +141,11 @@ Column spacing is supported.
```
:::
### Hybrid layout
### Layout híbrido
Form a more complex hybrid layout by combining the basic 1/24 columns.
Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
::: demo
:::**Demo**
```html
<el-row :gutter="20">
<el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
......@@ -194,11 +194,11 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
```
:::
### Column offset
### Offset de columnas
You can specify column offsets.
Puedes especificar offsets para las columnas.
::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
```html
<el-row :gutter="20">
......@@ -244,11 +244,11 @@ You can specify column offsets.
```
:::
### Alignment
### Alineación
Use the flex layout to make flexible alignment of columns.
Usa flex layout para un alineamiento flexible de columnas.
::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
:::**Demo** Puedes habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
```html
<el-row type="flex" class="row-bg">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
......@@ -309,9 +309,9 @@ Use the flex layout to make flexible alignment of columns.
### Responsive Layout
Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
::: demo
:::**Demo**
```html
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
......@@ -341,48 +341,50 @@ Taking example by Bootstrap's responsive design, five breakpoints are preset: xs
```
:::
### Utility classes for hiding elements
### Clases útiles para ocultar elementos
Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
Adicionalmente, Element provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden se agregadas a cualquier elemento del DOM o un elemento propio. Necesitas importar el siguiente archivo CSS para usar estas clases:
```js
import 'element-ui/lib/theme-chalk/display.css';
```
The classes are:
- `hidden-xs-only` - hide when on extra small viewports only
- `hidden-sm-only` - hide when on small viewports and down
- `hidden-sm-and-down` - hide when on small viewports and down
- `hidden-sm-and-up` - hide when on small viewports and up
- `hidden-md-only` - hide when on medium viewports only
- `hidden-md-and-down` - hide when on medium viewports and down
- `hidden-md-and-up` - hide when on medium viewports and up
- `hidden-lg-only` - hide when on large viewports only
- `hidden-lg-and-down` - hide when on large viewports and down
- `hidden-lg-and-up` - hide when on large viewports and up
- `hidden-xl-only` - hide when on extra large viewports only
### Row Attributes
| Attribute | Description | Type | Accepted Values | Default |
Las clases son:
- `hidden-xs-only` - oculto en viewports extra pequenhos solamente
- `hidden-sm-only` - oculto en viewports pequenhos solamente
- `hidden-sm-and-down` - oculto en viewports pequenhos y menores
- `hidden-sm-and-up` - oculto en viewports pequenhos y superiores
- `hidden-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 | grid spacing | number | — | 0 |
| type | layout mode, you can use flex, works in modern browsers | string | — | — |
| justify | horizontal alignment of flex layout | string | start/end/center/space-around/space-between | start |
| align | vertical alignment of flex layout | string | top/middle/bottom | top |
| tag | custom element tag | string | * | div |
### Col Attributes
| Attribute | Description | Type | Accepted Values | Default |
| 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 | number of column the grid spans | number | — | 24 |
| offset | number of spacing on the left side of the grid | number | — | 0 |
| push | number of columns that grid moves to the right | number | — | 0 |
| pull | number of columns that grid moves to the left | number | — | 0 |
| xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
| tag | custom element tag | string | * | div |
| 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 |
examples/docs/es/loading.md
View file @ 8d6950fa
......@@ -49,15 +49,15 @@
}
</script>
## Loading
## Cargando
Show animation while loading data.
Se muestra la animación mientras se cargan los datos.
### Loading inside a container
### Cargando dentro de un contenedor
Displays animation in a container (such as a table) while loading data.
Muestra una animación en un contenedor (como en una tabla) mientras se cargan los datos.
:::demo Element provides two ways to invoke Loading: directive and service. For the custom directive `v-loading`, you just need to bind a `boolean` value to it. By default, the loading mask will append to the element where the directive is used. Adding the `body` modifier makes the mask append to the body element.
:::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
<template>
......@@ -67,17 +67,17 @@ Displays animation in a container (such as a table) while loading data.
style="width: 100%">
<el-table-column
prop="date"
label="Date"
label="Fecha"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
label="Nombre"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
label="Dirección">
</el-table-column>
</el-table>
</template>
......@@ -113,11 +113,11 @@ Displays animation in a container (such as a table) while loading data.
```
:::
### Customization
### Personalización
You can customize loading text, loading spinner and background color.
Puedes personalizar el texto de carga, spinner de carga y color de fondo.
:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
:::demo Agrega el atributo `element-loading-text` al elemento en el que `v-loading` está vinculado, y su valor se mostrará debajo del spinner. Del mismo modo, `element-loading-spinner` y `element-loading-background` son para personalizar el nombre de la clase del spinner y el color de fondo.
```html
<template>
<el-table
......@@ -129,17 +129,17 @@ You can customize loading text, loading spinner and background color.
style="width: 100%">
<el-table-column
prop="date"
label="Date"
label="Fecha"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
label="Nombre"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
label="Dirección">
</el-table-column>
</el-table>
</template>
......@@ -169,11 +169,11 @@ You can customize loading text, loading spinner and background color.
```
:::
### Full screen loading
### Cargando a pantalla completa
Show a full screen animation while loading data.
Muestra una animación de pantalla completa mientras se cargan los datos
:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
:::demo Cuando se utiliza como una directiva, la carga a pantalla completa requiere el modificador `fullscreen`, y este puede ser agregado al `body`. En este caso, si deseas deshabilitas el desplazamiento en `body`, puedes agregar otro modificador `lock`. Cuando se utiliza como un servicio, el componente puede ser mostrado a pantalla completa por defecto.
```html
<template>
......@@ -181,12 +181,12 @@ Show a full screen animation while loading data.
type="primary"
@click="openFullScreen"
v-loading.fullscreen.lock="fullscreenLoading">
As a directive
Como directiva
</el-button>
<el-button
type="primary"
@click="openFullScreen2">
As a service
Como servicio
</el-button>
</template>
......@@ -221,38 +221,40 @@ Show a full screen animation while loading data.
```
:::
### Service
You can also invoke Loading with a service. Import Loading service:
### Servicio
Puedes invocar el componente con un servicio. Importa el servicio:
```javascript
import { Loading } from 'element-ui';
```
Invoke it:
Invocar:
```javascript
Loading.service(options);
```
The parameter `options` is the configuration of Loading, and its details can be found in the following table. `LoadingService` returns a Loading instance, and you can close it by invoking its `close` method:
El parámetro `options` es la configuración del componente, y estos detalles pueden ser encontrados en la siguiente table. `LoadingService` devuelve una instancia del componente, y tú puedes cerrarlo invocando el método `close`:
```javascript
let loadingInstance = Loading.service(options);
loadingInstance.close();
```
Note that in this case the full screen Loading is singleton. If a new full screen Loading is invoked before an existing one is closed, the existing full screen Loading instance will be returned instead of actually creating another Loading instance:
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
```
Calling the `close` method on any one of them can close this full screen Loading.
Llamar al método `close` en cualquiera de estas puede cerrarlo.
If Element is imported entirely, a globally method `$loading` will be registered to Vue.prototype. You can invoke it like this: `this.$loading(options)`, and it also returns a Loading instance.
Si Element es importado completamente, un método global `$loading` puede ser registrado a Vue.prototype. Puedes invocarlo como esto: `this.$loading(options)`, y también devuelve una instancia del componente.
### Options
| Attribute | Description | Type | Accepted Values | Default |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| target | the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node | object/string | — | document.body |
| body | same as the `body` modifier of `v-loading` | boolean | — | false |
| fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
| lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
| text | loading text that displays under the spinner | string | — | — |
| spinner | class name of the custom spinner | string | — | — |
| background | background color of the mask | string | — | — |
| customClass | custom class name for Loading | string | — | — |
\ No newline at end of file
| 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
examples/docs/es/menu.md
View file @ 8d6950fa
......@@ -53,13 +53,14 @@
## NavMenu
Menu that provides navigation for your website.
Menú que provee la navegación para tu sitio.
### Top bar
Top bar NavMenu can be used in a variety of scenarios.
Top bar NavMenu puede ser usado en distinto escenarios.
:::**Demo** Por defecto el menú es vertical, pero puedes hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puedes utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
```html
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1">Processing Center</el-menu-item>
......@@ -110,9 +111,10 @@ Top bar NavMenu can be used in a variety of scenarios.
### Side bar
Vertical NavMenu with sub-menus.
NavMenu vertical con sub-menús.
:::**Demo** Puedes utilizar el componente el-menu-item-group para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
```html
<el-row class="tac">
<el-col :span="12">
......@@ -205,9 +207,9 @@ Vertical NavMenu with sub-menus.
### Collapse
Vertical NavMenu could be collapsed.
NavMenu vertical puede ser colapsado.
::: demo
:::**Demo**
```html
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="false">expand</el-radio-button>
......@@ -269,50 +271,50 @@ Vertical NavMenu could be collapsed.
```
:::
### Menu Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| mode | menu display mode | string | horizontal / vertical | vertical |
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
| background-color | background color of Menu (hex format) | string | — | #ffffff |
| text-color | text color of Menu (hex format) | string | — | #2d2f33 |
| active-text-color | text color of currently active menu item (hex format) | string | — | #409EFF |
| default-active | index of currently active menu | string | — | — |
| default-openeds | array that contains keys of currently active sub-menus | Array | — | — |
| 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 | whether only one sub-menu can be active | boolean | — | false |
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | — | hover |
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | 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 |
### Menu Methods
| Event Name | Description | Parameters |
### Métodos Menu
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| open | open a specific sub-menu | index: index of the sub-menu to open |
| close | close a specific sub-menu | index: index of the sub-menu to close |
| 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 |
### Menu Events
| Event Name | Description | Parameters |
### Eventos Menu
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| select | callback function when menu is activated | index: index of activated menu, indexPath: index path of activated menu |
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
| 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 |
### Menu-Item Events
| Event Name | Description | Parameters |
### Eventos Menu-Item
| Nombre de evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| click | callback function when menu-item is clicked | el: menu-item instance |
| click | callback ejecutado cuando se hace click sobre menu-item | el: instancia de menu-item |
### SubMenu Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos SubMenu
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — |
| index | identificador único | string | — | — |
### Menu-Item Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu-Item
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — |
| route | Vue Router object | object | — | — |
| index | identificador único | string | — | — |
| route | Object Vue Router | object | — | — |
### Menu-Group Attribute
| Attribute | Description | Type | Accepted Values | Default |
### Atributos Menu-Group
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|---------- |-------- |---------- |------------- |-------- |
| title | group title | string | — | — |
| title | título del grupo | string | — | — |
examples/docs/es/message-box.md
View file @ 8d6950fa
This diff is collapsed.
examples/docs/es/message.md
View file @ 8d6950fa
......@@ -83,13 +83,13 @@
## Message
Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.
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.
### Basic usage
### Uso basico
Displays at the top, and disappears after 3 seconds.
Se muestra en la parte superior de la pagina y desaparece despues de 3 segundos.
:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
:::demo La configuracion del componente Message es muy similar al del componente notification, asi que parte de las opciones no seran explicadas a detalle aqui. Puedes consultar la tabla de opciones en la parte inferior conbinada con la documentacion del componente notification para comprenderla. Element a registrado un metodo `$message` para poder invocarlo. Message puede tomar una cadena o un Vnode como parametro, y lo mostrara como el cuerpo principal.
```html
<template>
......@@ -119,11 +119,11 @@ Displays at the top, and disappears after 3 seconds.
```
:::
### Types
### Tipos
Used to show the feedback of Success, Warning, Message and Error activities.
Utilizados para mostrar retroalimentacion de Success, Warning, Message y Error activities.
:::demo When you need more customizations, Message component can also take an object as parameter. For example, setting value of `type` can define different types, and its default is `info`. In such cases the main body is passed in as the value of `message`. Also, we have registered methods for different types, so you can directly call it without passing a type like `open4`.
:::demo Cuando necesitas mas personalizacion, el componente Message tambien puede tomar un objeto como parametro. Por ejemplo, Estableciendo el valor de `type` puedes definir diferentes tipos, el predeterminado es `info`. En tales casos el cuerpo principal se pasa como el valor de `message`. Tambien, tenemos registrados metodos para los diferentes tipos, asi que, puedes llamarlos sin necesidad de pasar un tipo como `open4`.
```html
<template>
<el-button :plain="true" @click="open2">success</el-button>
......@@ -163,9 +163,9 @@ Used to show the feedback of Success, Warning, Message and Error activities.
### Closable
A close button can be added.
Un boton para cerrar que puede ser agregado.
:::demo A default Message cannot be closed manually. If you need a closable message, you can set `showClose` field. Besides, same as notification, message has a controllable `duration`. Default duration is 3000 ms, and it won't disappear when set to `0`.
:::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
<template>
<el-button :plain="true" @click="open5">message</el-button>
......@@ -214,7 +214,7 @@ A close button can be added.
:::
### Centered text
Use the `center` attribute to center the text.
Utiliza el atributo `center` para centrar el texto.
:::demo
......@@ -238,10 +238,10 @@ Use the `center` attribute to center the text.
```
:::
### Use HTML string
`message` supports HTML string.
### Utiliza cadenas HTML
`message` soporta cadenas HTML.
:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
:::demo Establece la propiedad `dangerouslyUseHTMLString` en true y `message` sera tratado como una cadena HTML.
```html
<template>
......@@ -263,15 +263,15 @@ Use the `center` attribute to center the text.
```
:::
:::warning
Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
:::advertencia
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.
:::
### Global method
### Metodos Globales
Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
Element ha agregado un método global llamado `$message` para Vue.prototype. Entonces en una instancia de vue puedes llamar a `Message` como lo hicimos en esta pagina.
### Local import
### Importación local
Import `Message`:
......@@ -279,24 +279,24 @@ Import `Message`:
import { Message } from 'element-ui';
```
In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
You can call `Message.closeAll()` to manually close all the instances.
En este caso deberias llamar al metodo `Message(options)`. Tambien hemos registrado metodos para los diferentes tipos, e.g. `Message.success(options)`.
Puedes llamar al metodo `Message.closeAll()` para cerrar manualmente todas las instancias.
### Options
| Attribute | Description | Type | Accepted Values | Default |
| Atributo | Descripcion | Tipo | Valores permitidos | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| message | message text | string / VNode | — | — |
| type | message type | string | success/warning/info/error | info |
| iconClass | custom icon's class, overrides `type` | string | — | — |
| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
| customClass | custom class name for Message | string | — | — |
| duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
| showClose | whether to show a close button | boolean | — | false |
| center | whether to center the text | boolean | — | false |
| onClose | callback function when closed with the message instance as the parameter | function | — | — |
### Methods
`Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
| Method | Description |
| 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, puedes llamas al metodo `close`.
| Metodo | Descripcion |
| ---- | ---- |
| close | close the Message |
| close | cierra el componente Message |
examples/docs/es/pagination.md
View file @ 8d6950fa
......@@ -48,13 +48,12 @@
}
</style>
## Pagination
## Paginación
Si tiene que mostrar muchos datos en una página, utiliza la paginación.
If you have too much data to display in one page, use pagination.
### Uso básico
### Basic usage
:::demo Set `layout` with different pagination elements you wish to display separated with a comma. Pagination elements are: `prev` (a button navigating to the previous page), `next` (a button navigating to the next page), `pager` (page list), `jumper` (a jump-to input), `total` (total item count), `size` (a select to determine page size) and `->`(every element after this symbol will be pulled to the right).
:::**Demo** Asigna en el atributo `layout` los diferentes elementos que quieres utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamanho de la página ) y `->`(todo elemento situado luego de este símbolo será halado a la derecha).
```html
<div class="block">
<span class="demonstration">When you have few pages</span>
......@@ -73,11 +72,11 @@ If you have too much data to display in one page, use pagination.
```
:::
### Small Pagination
### Paginación pequenha
Use small pagination in the case of limited space.
Usa una paginación pequenha en caso de espacio limitado.
:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
:::**Demo** Solo pon el atributo `small` como `true` y la Paginación se volverá pequenha.
```html
<el-pagination
small
......@@ -87,11 +86,11 @@ Use small pagination in the case of limited space.
```
:::
### More elements
### Más elementos
Add more modules based on your scenario.
Agrega más modulos basados en tu escenario.
:::demo This example is a complete use case. It uses `size-change` and `current-change` event to handle page size changes and current page changes. `page-sizes` accepts an array of integers, each of which represents a different page size in the `sizes` select options, e.g. `[100, 200, 300, 400]` indicates that the select will have four options: 100, 200, 300 or 400 items per page.
:::**Demo** Este ejemplo es un completo caso de uso. Este utiliza los eventos `size-change` y `current-change` para manejar el tamanho de página y el cambio de página. El atributo `page-sizes` acepta un arrelgo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
```html
<template>
......@@ -195,27 +194,27 @@ Add more modules based on your scenario.
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| small | whether to use small pagination | boolean | — | false |
| page-size | item count of each page | number | — | 10 |
| total | total item count | number | — | — |
| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — |
| current-page | current page number, supports the .sync modifier | number | — | 1 |
| layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total' |
| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] |
| popper-class | custom class name for the page size Select's dropdown | string | — | — |
| prev-text | text for the prev button | string | — | — |
| next-text | text for the next button | string | — | — |
### Events
| Event Name | Description | Parameters |
| small | usar paginación pequenha | 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 | triggers when `page-size` changes | the new `page-size` |
| current-change | triggers when `current-page` changes | the new `current-page` |
| 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
| Name | Description |
| Nombre | Descripción |
| --- | --- |
| — | custom content. To use this, you need to declare `slot` in `layout` |
| — | Elemento propio. Para utilizar esto necesitas declarar `slot` en el `layout` |
examples/docs/es/popover.md
View file @ 8d6950fa
......@@ -99,11 +99,11 @@
## Popover
### Basic usage
### Uso básico
Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplicated attributes, please refer to the documentation of Tooltip.
Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
:::demo Add `ref` in your popover, then in your button, use `v-popover` directive to link the button and the popover. The attribute `trigger` is used to define how popover is triggered: `hover`, `click` or `focus`. Alternatively, you can specify reference using a named `slot`.
:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternatica puedes especificar la referencia utilizando un `[named slot](https://vuejs.org/v2/guide/components.html#Named-Slots).
```html
<el-popover
......@@ -137,11 +137,10 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
```
:::
### Nested information
### Información anidada
Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
Other components can be nested in popover. Following is an example of nested table.
:::demo replace the `content` attribute with a default `slot`.
:::**Demo** Reemplaza el atributo `content` con un `slot`.
```html
<el-popover
......@@ -186,11 +185,11 @@ Other components can be nested in popover. Following is an example of nested tab
```
:::
### Nested operation
### Operación anidada
Of course, you can nest other operations. It's more light-weight than using a dialog.
Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
:::demo
:::**Demo**
```html
<el-popover
ref="popover5"
......@@ -216,33 +215,33 @@ Of course, you can nest other operations. It's more light-weight than using a di
}
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Valores por defecto |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | how the popover is triggered | string | click/focus/hover/manual | click |
| title | popover title | string | — | — |
| content | popover content, can be replaced with a default `slot` | string | — | — |
| width | popover width | string, number | — | Min width 150px |
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | whether Popover is disabled | boolean | — | false |
| value(v-model) | whether popover is visible | Boolean | — | false |
| 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 | whether a tooltip arrow is displayed or not. For more info, please refer to [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parameters for [popper.js](https://popper.js.org/documentation.html) | object | please refer to [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
| open-delay | delay of appearance when `trigger` is hover, in milliseconds | number | — | — |
| visible-arrow | si una flecha del tooltip is mostrada o no. Para más información, por favor refiérase a [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| 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
| Name | Description |
| Nombre | Descripción |
| --- | --- |
| — | text content of popover |
| reference | HTML element that triggers popover |
| — | texto contenido en popover |
| reference | elemento HTML que dispara el popover |
### Events
| Event Name | Description | 回调参数 |
### Eventos
| Nombre del evento | Descripción | Parámetros |
|---------|--------|---------|
| show | triggers when popover shows | — |
| hide | triggers when popover hides | — |
| show | se dispara cuando se muestra el popover | — |
| hide | se dispara cuando se oculta el popover | — |
examples/docs/es/progress.md
View file @ 8d6950fa
......@@ -9,13 +9,12 @@
}
}
</style>
## Progress
## Progreso
Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
Progress is used to show the progress of current operation, and inform the user the current status.
### Barra de progreso lineal (porcentage externo)
### Linear progress bar (external percentage)
:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
```html
<el-progress :percentage="0"></el-progress>
<el-progress :percentage="70"></el-progress>
......@@ -24,11 +23,10 @@ Progress is used to show the progress of current operation, and inform the user
```
:::
### Linear progress bar (internal percentage)
In this case the percentage takes no additional space.
### Barra de progreso lineal (porcentage interno)
En este caso el porcentage no toma espacio adicional.
:::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
:::**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
<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
......@@ -37,9 +35,9 @@ In this case the percentage takes no additional space.
```
:::
### Circular progress bar
### Barra de progreso circular
:::demo You can specify `type` attribute to `circle` to use circular progress bar, and use `width` attribute to change the size of circle.
:::**Demo** Puedes asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamanho del círculo.
```html
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
......@@ -49,13 +47,13 @@ In this case the percentage takes no additional space.
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
| Atributo | Descripción | Tipo | Valores aceptado | Valores por defecto |
| --- | ---- | ---- | ---- | ---- |
| **percentage** | percentage, **required** | number | 0-100 | 0 |
| type | the type of progress bar | string | line/circle | line |
| stroke-width | the width of progress bar | number | — | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
| status | the current status of progress bar | string | success/exception | — |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| **percentage** | porcenteage, **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 porcentage 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 porcentage | boolean | — | true |
examples/docs/es/quickstart.md
View file @ 8d6950fa
## Quick start
## Inicio rápido
This part walks you through the process of using Element in a webpack project.
Esta sección te guía en el proceso de usar Element con webpack en un proyecto.
### Use Starter Kit
### Usa la plantilla de Kit de inicio
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.
Proveemos una plantilla general [project template](https://github.com/ElementUI/element-starter) para ti. Para los usuarios de Laravel, también tenemos [template](https://github.com/ElementUI/element-in-laravel-starter). Puedes descargarlas y agregarlas directamente también.
If you prefer not to use them, please read the following.
Si prefieres no utilizarlas, lee las siguientes secciones de este documento.
### Use vue-cli
### Usando vue-cli
We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli):
```shell
> npm i -g vue-cli
......@@ -19,11 +19,11 @@ We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
> npm i && npm i element-ui
```
### Import Element
### Importando Element
You can import Element entirely, or just import what you need. Let's start with fully import.
Puedes importar Element completamente o solamente importar lo que necesites. Comencemos importando todo.
#### Fully import
#### Importando todo
In main.js:
```javascript
......@@ -39,19 +39,19 @@ new Vue({
render: h => h(App)
})
```
The above imports Element entirely. Note that CSS file needs to be imported separately.
El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
#### On demand
#### En demanda
With the help of [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), we can import components we actually need, making the project smaller than otherwise.
Con la ayuda de [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequenho que de la otra manera.
First, install babel-plugin-component:
Primero, instala babel-plugin-component:
```bash
npm install babel-plugin-component -D
```
Then edit .babelrc:
Luego edita .babelrc:
```json
{
"presets": [
......@@ -66,7 +66,7 @@ Then edit .babelrc:
}
```
Next, if you need Button and Select, edit main.js:
Luego, si necesitas Button y Select, edita main.js:
```javascript
import Vue from 'vue'
......@@ -86,7 +86,7 @@ new Vue({
})
```
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
```javascript
import Vue from 'vue'
......@@ -233,17 +233,17 @@ Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
```
### Global config
When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
### Configuración global
Cuando importas Element, puedes definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamanho por defecto de todos los componentes:
Fully import Element：
Importando Element completamente：
```JS
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, { size: 'small' })
```
Partial import Element：
Importando Element parcialmente：
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
......@@ -251,11 +251,10 @@ import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button)
```
With the above config, the default size of all components that have size attribute will be 'small'.
Con la anterior configuración, el tamanho por defecto de todos los componentes que tienen el atributo `size` será `small`.
### Start coding
Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:
### Empieza ya!
Ahora haz incorporado Vue y Element a tu proyecto es tiempo para comenzar a programar. Inicia el modo de desarrollo:
```bash
# visit localhost:8086
......@@ -267,4 +266,4 @@ Build:
```bash
npm run build
```
Please refer to each component's documentation to learn how to use them.
Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
\ No newline at end of file
examples/docs/es/radio.md
View file @ 8d6950fa
......@@ -19,14 +19,12 @@
</script>
## Radio
Selección única entre múltiples opciones.
Single selection among multiple options.
### Uso básico
El elemento Radio no debe tener muchas opciones. De otra manera, utilice el componente Select.
### Basic usage
Radio should not have too many options. Otherwise, use the Select component instead.
:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
:::**Demo** Crear un elemento Radio es fácil, solo necesitas enlazar(`bind`) una variable a la directiva `v-model` del Radio. Va a ser igual al valor `label` del Radio seleccionado. El tipo de dato de `label` es `String`, `Number` o `Boolean`.
```html
<template>
<el-radio v-model="radio" label="1">Option A</el-radio>
......@@ -45,11 +43,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
```
:::
### Disabled
### Deshabilitado
`disabled` attribute is used to disable the radio.
El atributo `disabled` es utilizado para deshabilitar un Radio.
:::demo You just need to add the `disabled` attribute.
:::**Demo** Solo necesitas agregar el atributo `disabled`.
```html
<template>
<el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
......@@ -68,11 +66,11 @@ Radio should not have too many options. Otherwise, use the Select component inst
```
:::
### Radio button group
### Grupo de elementos Radio
Suitable for choosing from some mutually exclusive options.
Recomendado para seleccionar opciones que se excluyen mutuamente.
:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
:::**Demo** Combina `el-radio-group` con `el-radio` para mostrar un grupo de Radios. Enlaza la variable con `v-model` del elemento `el-radio-group` y asigna el valor del `label` en `el-radio`. También provee el evento `change` con el valor actual como parámetro.
```html
<el-radio-group v-model="radio2">
......@@ -93,11 +91,11 @@ Suitable for choosing from some mutually exclusive options.
```
:::
### Button style
### Estilo Button
Radio with button styles.
Radio con estilo de botón.
:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
:::**Demo** Solo necesitas cambiar el elemento `el-radio` a `el-radio-button`. También proveemos el atributo `size`.
```html
<template>
<div>
......@@ -149,9 +147,9 @@ Radio with button styles.
```
:::
### With borders
### Con bordes
:::demo The `border` attribute adds a border to Radios.
:::**Demo** El atributo `border` agrega un borde al elemento Radios.
```html
<template>
<div>
......@@ -191,41 +189,43 @@ Radio with button styles.
```
:::
### Radio Attributes
### Atributos de Radio
Attribute | Description | Type | Accepted Values | Default
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
---- | ---- | ---- | ---- | ----
label | the value of Radio | string / number / boolean | — | —
disabled | whether Radio is disabled | boolean | — | false
border | whether to add a border around Radio | boolean | — | false
size | size of the Radio, only works when `border` is true | string | medium / small / mini | —
name | native 'name' attribute | string | — | —
label | el valor del Radio | string / number / boolean | — | —
disabled | si el Radio está deshabilitado| boolean | — | false
border | agregar borde alrededor del elemento Radio | boolean | — | false
size | tamanho del elemento Radio, solo funciona si `border` es verdadero | string | medium / small / mini | —
name | atributo nativo 'name'| string | — | —
### Radio Events
### Atributos de Radio-button
| Event Name | Description | Parameters |
| --- | --- | --- |
| change | triggers when the bound value changes | the label value of the chosen radio |
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
---- | ---- | ---- | ---- | ----
label | el valor del Radio | string / number | — | —
disabled | si el Radio está deshabilitado | boolean | — | false
name | atributo nativo 'name' | string | — | —
### Radio-group Attributes
### Atributos de Radio-group
Attribute | Description | Type | Accepted Values | Default
Atributo | Descripción| Tipo |Valores Aceptado| Valores por defecto
---- | ---- | ---- | ---- | ----
size | the size of radio buttons or bordered radios | string | medium / small / mini | —
disabled | whether the nesting radios are disabled | boolean | — | false
text-color | font color when button is active | string | — | #ffffff |
fill | border and background color when button is active | string | — | #409EFF |
size | tamanho 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 |
### Radio-group Events
### Eventos de Radio
| Event Name | Description | Parameters |
| Nombre de evento| Descripción| Parámetros |
| --- | --- | --- |
| change | triggers when the bound value changes | the label value of the chosen radio |
| change | se dispara cuando el valor cambia | el valor del `label` del Radio seleccionado |
### Radio-button Attributes
Attribute | Description | Type | Accepted Values | Default
---- | ---- | ---- | ---- | ----
label | the value of radio | string / number | — | —
disabled | whether radio is disabled | boolean | — | false
name | native 'name' attribute | string | — | —
### 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 |
examples/docs/es/rate.md
View file @ 8d6950fa
......@@ -39,13 +39,14 @@
}
</script>
## Rate
## Calificación
Used for rating
Usado para la calificación
### Basic usage
### Uso básico
:::**Demo** Clasificación divide las puntuaciones en tres niveles y estos niveles pueden distinguirse usando diferentes colores de fondo. Por defecto los colores de fondo son iguales, pero puedes asignarlos para reflejar los tres niveles usando el atributo `colors` y sus dos umbrales pueden ser definidos con `low-treshold` y `high-treshold`.
:::demo Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the `colors` attribute, and their two thresholds can be defined by `low-threshold` and `high-threshold`.
``` html
<div class="block">
......@@ -73,11 +74,11 @@ Used for rating
```
:::
### With text
### Con texto
Using text to indicate rating score
Usa texto para indicar la puntuación
:::demo Add attribute `show-text` to display text at the right of Rate. You can assign texts for different scores using `texts`. `texts` is an array whose length should be equal to the max score `max`.
:::**Demo** Agrega el atributo `show-text` para mostrar texto a la derecha del componente. Puedes asignar textos para las distintas puntuaciones usando `texts`. `texts` es un arreglo cuya longitud debe ser igual a la máxima puntuación `max`.
``` html
<el-rate
......@@ -98,11 +99,11 @@ Using text to indicate rating score
```
:::
### More icons
### Más iconos
You can use different icons to distinguish different rate components.
Puedes utilizar iconos para diferenciar cada componente.
:::demo You can customize icons for three different levels using `icon-classes`. In this example, we also use `void-icon-class` to set the icon if it is unselected.
:::**Demo** Puedes customizar iconos para tres niveles diferentes usando `icon-classes`. En este ejemplo también usamos `void-icon-class` para asignar un icono si no está seleccionado.
``` html
<el-rate
......@@ -124,11 +125,11 @@ You can use different icons to distinguish different rate components.
```
:::
### Read-only
### Solo lectura
Read-only Rate is for displaying rating score. Half star is supported.
La calificación de solo lectura is para mostrar la puntuación. Soporta media estrella.
:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
:::**Demo** Usa el atributo `disabled` para hacer el componente de solo lectura. Agrega `show-score` para mostrar la puntuación en el lado derecho. Además, puedes usar el atributo `score-template` para proveer una plantilla. Tiene que contener `{value}`, y `{value}` será sustituido por la puntuación.
``` html
<el-rate
......@@ -151,27 +152,27 @@ Read-only Rate is for displaying rating score. Half star is supported.
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción| Tipo| Valores aceptado| Valores por defecto|
|---------- |-------- |---------- |------------- |-------- |
| max | max rating score | number | — | 5 |
| disabled | whether Rate is read-only | boolean | — | false |
| allow-half | whether picking half start is allowed | boolean | — | false |
| low-threshold | threshold value between low and medium level. The value itself will be included in low level | number | — | 2 |
| high-threshold | threshold value between medium and high level. The value itself will be included in high level | number | — | 4 |
| colors | color array for icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['#F7BA2A', '#F7BA2A', '#F7BA2A'] |
| void-color | color of unselected icons | string | — | #C6D1DE |
| disabled-void-color | color of unselected read-only icons | string | — | #EFF2F7 |
| icon-classes | array of class names of icons. It should have 3 elements, each of which corresponds with a score level | array | — | ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on'] |
| void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
| disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
| show-text | whether to display texts | boolean | — | false |
| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
| text-color | color of texts | string | — | #1F2D3D |
| texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
| score-template | score template | string | — | {value} |
| 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} |
### Events
| Event Name | Description | Parameters |
| Nombre del evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| change | Triggers when rate value is changed | value after changing |
| change | Se dispara cuando la puntuación es cambiada | valor luego del cambio |
examples/docs/es/select.md
View file @ 8d6950fa
......@@ -101,6 +101,7 @@
value8: '',
value9: [],
value10: [],
value11: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
};
......@@ -322,7 +323,7 @@ Puede limpiar un Select con un icono.
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.
:::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. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
```html
<template>
......@@ -334,6 +335,20 @@ Selección multiple utiliza tags para mostrar las opciones seleccionadas.
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value11"
multiple
collapse-tags
style="margin-left: 20px;"
placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
......@@ -655,6 +670,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
| multiple | si multiple-select esta activo | boolean | — | false |
| disabled | si Select esta deshabilitado | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | 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 |
......
examples/docs/es/switch.md
View file @ 8d6950fa
......@@ -24,10 +24,11 @@
## Switch
Switch is used for switching between two opposing states.
Switch es utilizdo para realizar cambios entre dos estados opuestos.
### Basic usage
:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
### Uso básico
:::demo Enlaza `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
```html
<el-switch v-model="value1">
......@@ -51,8 +52,8 @@ Switch is used for switching between two opposing states.
```
:::
### Text description
:::demo You can add `active-text` and `inactive-text` attribute to show texts.
### Texto de descripción
:::demo Puedes agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
```html
<el-switch
......@@ -82,9 +83,9 @@ Switch is used for switching between two opposing states.
```
:::
### Extended value types
### Tipos de valores extendidos
:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
:::demo Puedes establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
```html
<el-tooltip :content="'Switch value: ' + value5" placement="top">
......@@ -112,7 +113,7 @@ Switch is used for switching between two opposing states.
### Disabled
:::demo Adding the `disabled` attribute disables Switch.
:::demo Agregar el atributo `disabled` desactiva el componente Switch.
```html
<el-switch
......@@ -137,29 +138,30 @@ Switch is used for switching between two opposing states.
```
:::
### Attributes
### Atributos
Attribute | Description | Type | Accepted Values | Default
Atributo | Descripción | Tipo | Valores aceptados | Por defecto
----| ----| ----| ----|----
disabled | whether Switch is disabled | boolean | — | false
width | width of Switch | number | — | 40
active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
active-text | text displayed when in `on` state | string | — | —
inactive-text | text displayed when in `off` state | string | — | —
active-value | switch value when in `on` state | boolean / string / number | — | true
inactive-value | switch value when in `off` state | boolean / string / number | — | false
active-color | background color when in `on` state | string | — | #409EFF
inactive-color | background color when in `off` state | string | — | #C0CCDA
name| input name of Switch | string | — | —
### Events
Event Name | Description | Parameters
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 | triggers when value changes | value after changing
change | se dispara cuando el valor cambia | valor
después de cambiar
### Methods
Method | Description | Parameters
### Metodos
Metodo | Descripción | Parametro
------|--------|-------
focus | focus the Switch component | —
focus | foco al componente Switch | —
examples/docs/es/table.md
View file @ 8d6950fa
This diff is collapsed.
examples/docs/es/tabs.md
View file @ 8d6950fa
......@@ -90,15 +90,15 @@
}
</script>
## Tabs
## Tabulación
Divide data collections which are related yet belong to different types.
Divide collecciones de datos que están relacionados pero pertenecen a diferentes tipos.
### Basic usage
### Uso básico
Basic and concise tabs.
Tabulación básica y concisa
:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute.
:::demo de Tabulación provee funcionalidad de tarjeta selectiva. Por defecto, la primer pestaña es seleccionada como activa, y es posible activar cualquier pestaña estableciendo el atributo de `value`.
```html
<template>
......@@ -126,11 +126,11 @@ Basic and concise tabs.
```
:::
### Card Style
### Estilo de Tarjeta
Tabs styled as cards.
Pestañas diseñadas como tarjetas.
:::demo Set `type` to `card` can get a card-styled tab.
:::demo Establecer `type` a `card` para obtener una pestaña diseñada como tarjeta.
```html
<template>
......@@ -158,11 +158,11 @@ Tabs styled as cards.
```
:::
### Border card
### Tarjeta con Bordes
Border card tabs.
Pestañas de tarjeta con bordes.
:::demo Set `type` to `border-card`.
:::demo Establecer `type` a `border-card`.
```html
<el-tabs type="border-card">
......@@ -175,11 +175,11 @@ Border card tabs.
:::
### Tab position
### Posición de tabulación
You can use `tab-position` attribute to set the tab's position.
Es posible usar el atributo `tab-position` para establecer la posición de la tabulación.
:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
:::demo Es posible escoger entre cuatro direcciones: `tabPosition="left|right|top|bottom"`
```html
<template>
......@@ -209,9 +209,9 @@ You can use `tab-position` attribute to set the tab's position.
```
:::
### Custom Tab
### Pestaña Personalizada
You can use named slot to customize the tab label content.
Es posible usar slots nombrados para personalizar el contenido de la etiqueta de la pestaña.
:::demo
```html
......@@ -227,9 +227,9 @@ You can use named slot to customize the tab label content.
```
:::
### Add & close tab
### Agregar y cerrar pestaña
Only card type Tabs support addable & closeable.
Solo las pestañas de tipo tarjeta soportan adición y cierre.
:::demo
```html
......@@ -295,7 +295,7 @@ Only card type Tabs support addable & closeable.
```
:::
### Customized trigger button of new tab
### Botón disparador personalizado de la nueva pestaña
:::demo
```html
......@@ -367,28 +367,28 @@ Only card type Tabs support addable & closeable.
```
:::
### Tabs Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos de Pestañas
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- |
| type | type of Tab | string | card/border-card | — |
| closable | whether Tab is closable | boolean | — | false |
| addable | whether Tab is addable | boolean | — | false |
| editable | whether Tab is addable and closable | boolean | — | false |
| value | name of the selected tab | string | — | name of first tab |
| tab-position | position of tabs | string | top/right/bottom/left | top |
| 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 |
### Tabs Events
| Event Name | Description | Parameters |
### Eventos de Pestañas
| Nombre de Evento | Descripción | Parámetros |
|---------- |-------- |---------- |
| tab-click | triggers when a tab is clicked | clicked tab |
| tab-remove | triggers when tab-remove button is clicked | name of the removed tab |
| tab-add | triggers when tab-add button is clicked | — |
| edit | triggers when tab-add button or tab-remove is clicked | (targetName, action) |
| 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) |
### Tab-pane Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Attributos del Tab-pane
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------- |---------- |------------- |-------- |
| label | title of the tab | string | — | — |
| disabled | whether Tab is disabled | boolean | — | false |
| name | identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' |
| 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 | whether Tab is closable | boolean | — | false |
examples/docs/es/time-picker.md
View file @ 8d6950fa
......@@ -6,15 +6,15 @@
}
</style>
## TimePicker
## Selector de Tiempo
Use Time Picker for time input.
Usar el Selector de Tiempo para entradas de tiempo.
### Fixed time picker
### Selector de tiempo fijo
Provide a list of fixed time for users to choose.
Provee una lista de tiempo fijo para que los usuarios escogan.
:::demo Use `el-time-select` label, then assign start time, end time and time step with `start`, `end` and `step`.
:::demo Usar el tag `el-time-select`, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con `start`, `end` y `step`.
```html
<el-time-select
v-model="value1"
......@@ -38,11 +38,11 @@ Provide a list of fixed time for users to choose.
```
:::
### Arbitrary time picker
### Selector de tiempo arbitrario
Can pick an arbitrary time.
Un tiempo arbitrario puede ser escogido.
:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
:::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
<template>
......@@ -76,9 +76,9 @@ Can pick an arbitrary time.
```
:::
### Fixed time range
### Rango de tiempo fijo
If start time is picked at first, then the end time will change accordingly.
Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
:::demo
```html
......@@ -117,11 +117,11 @@ If start time is picked at first, then the end time will change accordingly.
```
:::
### Arbitrary time range
### Rango de tiempo arbitrario
Can pick an arbitrary time range.
Es posible escoger un rango de tiempo arbitrario.
:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
:::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
<template>
<el-time-picker
......@@ -170,47 +170,47 @@ Can pick an arbitrary time range.
}
</script>
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — |
| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alignment | left / center / right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| range-separator | range separator | string | - | '-' |
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — |
| name | same as `name` in native input | string | — | — |
### Time Select Options
| Attribute | Description | Type | Accepted Values | Default |
| readonly | saber si el Selector de Fecha está en modo de sólo lectura | boolean | — | false |
| disabled | saber si el Selector de Fecha se encuentra deshabilitado | boolean | — | false |
| editable | saber si el input puede ser editado | boolean | — | true |
| clearable | saber si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder en un modo fuera de rango | string | — | — |
| start-placeholder | placeholder para el tiempo de inicio en modo de rango | string | — | — |
| end-placeholder | placeholder para el tiempo de finalización en modo de rango | string | — | — |
| is-range | saber si es posible escoger un rango de tiempo, solo funciona con `<el-time-picker>` | boolean | — | false |
| arrow-control | saber si es posible escoger el tiempo usando los botones de flecha, solo funciona con `<el-time-picker>` | boolean | — | false |
| value | valor del selector | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alineación | left / center / right | left |
| popper-class | nombre de clase personalizada para el dropdown del Selector de Tiempo | string | — | — |
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| range-separator | separador de rango | string | - | '-' |
| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
| value-format | opcional, solo para Selector de Tiempo, formato de valor limitado | string | hour `HH`, minute `mm`, second `ss` | — |
| name | así como `name` en input nativo | string | — | — |
### Opciones para Seleccionador de Tiempo
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
### Time Picker Options
| Attribute | Description | Type | Accepted Values | Default |
| 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 Selector de Tiempo
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| 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 |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre de Evento | Descripción | Parámetros |
|---------|--------|---------|
| change | triggers when user confirms the value | component's bounded value |
| blur | triggers when Input blurs | (event: Event) |
| focus | triggers when Input focuses | (event: Event) |
| 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) |
examples/docs/es/tooltip.md
View file @ 8d6950fa
......@@ -57,13 +57,13 @@
## Tooltip
Display prompt information for mouse hover.
Mostrar aviso de información para el hover del mouse.
### Basic usage
### Uso básico
Tooltip has 9 placements.
Tooltip tiene 9 colocaciones.
:::demo Use attribute `content` to set the display content when hover. The attribute `placement` determines the position of the tooltip. Its value is `[orientation]-[alignment]` with four orientations `top`, `left`, `right`, `bottom` and three alignments `start`, `end`, `null`, and the default alignment is null. Take `placement="left-end"` for example, Tooltip will display on the left of the element which you are hovering and the bottom of the tooltip aligns with the bottom of the element.
:::demo Usar el atributo `content` para establecer el contenido que se mostrará al hacer hover. El atributo `placement` determina la posición del tooltip. Su valor es `[orientation]-[alignment]` con cuatro orientaciones `top`, `left`, `right`, `bottom` y tres alineaciones `start`, `end`, `null`, la alineación default es null. Tome `placement="left-end"` como ejemplo, Tooltip será mostrado en la izquierda del elemento en que se esté haciendo hover y el fondo del tooltip se alineará con el fondo del elemento.
```html
<div class="box">
<div class="top">
......@@ -154,11 +154,11 @@ Tooltip has 9 placements.
:::
### Theme
### Tema
Tooltip has two themes: `dark` and `light`。
Tooltip tiene dos temas: `dark` and `light`.
:::demo Set `effect` to modify theme, and the default value is `dark`.
:::demo Establecer `effect` para modificar el tema, el valor por defecto es `dark`.
```html
<el-tooltip content="Top center" placement="top">
<el-button>Dark</el-button>
......@@ -169,11 +169,11 @@ Tooltip has two themes: `dark` and `light`。
```
:::
### More Content
### Más Contenido
Display multiple lines of text and set their format.
Despliegue múltiples líneas de texto y establezca su formato.
:::demo Override attribute `content` of `el-tooltip` by adding a slot named `content`.
:::demo Sobre-escribir el atributo `content` del `el-tooltip` al añadir un slot llamado `content`.
```html
<el-tooltip placement="top">
<div slot="content">multiple lines<br/>second line</div>
......@@ -182,15 +182,15 @@ Display multiple lines of text and set their format.
```
:::
### Advanced usage
### Uso Avanzado
In addition to basic usages, there are some attributes that allow you to customize your own:
Adicional a los usos básicos, existen algunos atributos que permiten la personalización:
`transition` attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is el-fade-in-linear.
el atributo `transition` permite personalizar la animación con la que el Tooltip se muestra o se esconda, el valor por defecto es `is el-fade-in-linear`.
`disabled` attribute allows you to disable `tooltip`. You just need set it to `true`.
el atributo `disabled` permite deshabilitar `tooltip`. Solo es necesario definirlo como `true`.
In fact, Tooltip is an extension based on [Vue-popper](https://github.com/element-component/vue-popper), you can use any attribute that are allowed in Vue-popper.
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
......@@ -217,26 +217,27 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
:::tip
The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
El componente `router-link` no es soportado por Tooltip, favor de usar `vm.$router.push`.
Disabled form elements are not supported for Tooltip, more information can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter). You need to wrap the disabled form element with a container element for Tooltip to work.
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.
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atributo | Descripción | Tipo | Valores Aceptados | Default |
|----------------|---------|-----------|-------------|--------|
| effect | Tooltip theme | string | dark/light | dark |
| content | display content, can be overridden by `slot#content` | String | — | — |
| placement | position of 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) | visibility of Tooltip | boolean | — | false |
| disabled | whether Tooltip is disabled | boolean | — | false |
| offset | offset of the Tooltip | number | — | 0 |
| transition | animation name | string | — | el-fade-in-linear |
| visible-arrow | whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
| popper-options | [popper.js](https://popper.js.org/documentation.html) parameters | Object | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | delay of appearance, in millisecond | number | — | 0 |
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
| popper-class | custom class name for Tooltip's popper | string | — | — |
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
| hide-after | timeout in milliseconds to hide tooltip | number | — | 0 |
| 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 | saber si una flecha es mostrada. Para mayor información, revisar la página de [Vue-popper](https://github.com/element-component/vue-popper) | boolean | — | true |
| popper-options | parámetros de [popper.js](https://popper.js.org/documentation.html) | Object | referirse a la documentación de [popper.js](https://popper.js.org/documentation.html) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| open-delay | retraso de la apariencia, en milisegundos | number | — | 0 |
| manual | saber si el Tooltipo será controlado de forma manual. `mouseenter` y `mouseleave` no tendrán efecto si fue establecido como `true` | boolean | — | false |
| popper-class | nombre de clase personalizada para el popper del Tooltip | string | — | — |
| enterable | saber si el mouse puede entrar al Tooltip | Boolean | — | true |
| hide-after | tiempo a esperar en milisegundos para esconder el Tooltip | number | — | 0 |
examples/docs/es/transfer.md
View file @ 8d6950fa
......@@ -72,8 +72,8 @@
## Transfer
### Basic usage
:::demo Data is passed to Transfer via the `data` attribute. The data needs to be an object array, and each object should have these attributes: `key` being the identification of the data item, `label` being the displayed text, and `disabled` indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to `v-model`, and the value of that variable is an array of target item keys. So, if you don't want the target list be initially empty, you can initialize the `v-model` with an array.
### Uso básico
:::demo Los datos se pasan a Transfer a través del atributo `data`. Los datos tienen que ser un array de objetos, y cada objeto debe tener estos atributos: `key` que será el identificador del item, `label` que será el texto a mostrar, y `disabled` que indicará si el elemento esta desactivado. Los items dentro de la lista destino están sincronizados con la variable asociada a `v-model`, y el valor de esa variable es un array de claves de los elementos de la lista destino. Así que si no quieres que la lista destino esté vacía inicialmente puedes inicializar el `v-model` con un array.
```html
<template>
<el-transfer
......@@ -106,11 +106,11 @@
```
:::
### Filterable
### Filtrar
You can search and filter data items.
Puedes buscar y filtrar los items.
:::demo Set the `filterable` attribute to `true` to enable filter mode. By default, if the data item `label` contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the `filter-method` attribute. It takes a method and passes search keyword and each data item to it whenever the keyword changes. For a certain data item, if the method returns true, it will be included in the result list.
::demo Pon el atributo `filterable` a true para permitir el filtrado.Por defecto si el `label` del item contiene el término buscado será incluido en el resultado. También puedes implementar tu propio método de filtrado con el atributo `filter-method`, que recibe un método y le pasa la búsqueda y cada item. Los items para los que devuelva true serán incluidos en el resultado de la búsqueda.
```html
<template>
<el-transfer
......@@ -153,9 +153,9 @@ You can search and filter data items.
### Customizable
You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
Puedes customizar los títulos, botones, la función de renderizado de los items, el texto de status de la cabecera y el contenido del pie.
:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
:::demo Usa `titles`, `button-texts`, `render-content` y `format` respectivamente para customizar los títulos de las listas, el texto de los botones, la función de renderizado para los items y el texto de la cabecera que muestra el estado de los items. Para el pie de la lista hay dos slots: `left-footer` y `right-footer`. Además, si quieres algunos items marcados inicialmente pudes usar `left-default-checked` y `right-default-checked`. Finalmente este ejemplo muestra el evento `change`. Ten en cuenta que este ejemplo no se puede ejecutar en jsfiddle porque no soporta sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias son configuradas correctamente.
```html
<template>
<el-transfer
......@@ -219,8 +219,9 @@ You can customize list titles, button texts, render function for data items, che
### Prop aliases
By default, Transfer looks for `key`, `label` and `disabled` in a data item. If your data items have different key names, you can use the `props` attribute to define aliases.
:::demo The data items in this example do not have `key`s or `label`s, instead they have `value`s and `desc`s. So you need to set aliases for `key` and `label`.
Por defecto Transfer busca los atributos `key`, `label`, y `disabled` en cada elemento. Si tus datos tienen un nombre diferente para la clave puedes usar el atributo `props` para añadir alias.
:::demo En este ejemplo los elementos no tienen `key`y `label`, en vez de eso tienen `value` y `desc`. Así que tienes que añadir alias para `key` y `label`.
```html
<template>
<el-transfer
......@@ -257,28 +258,29 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
### Atributos
| Atriburo | Descripcion | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- |
| data | data source | array[{ key, label, disabled }] | — | [ ] |
| filterable | whether Transfer is filterable | boolean | — | false |
| filter-placeholder | placeholder for the filter input | string | — | Enter keyword |
| filter-method | custom filter method | function | — | — |
| titles | custom list titles | array | — | ['List 1', 'List 2'] |
| button-texts | custom button texts | array | — | [ ] |
| render-content | custom render function for data items | function(h, option) | — | — |
| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
| props | prop aliases for data source | object{key, label, disabled} | — | — |
| left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
| right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |
| 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
| Name | Description |
| Nombre | Descripcion |
|------|--------|
| left-footer | content of left list footer |
| right-footer | content of right list footer |
| left-footer | Contenido del footer de la lista de la izquierda |
| right-footer | Contenido del footer de la lista de la derecha |
### Events
| Event Name | Description | Parameters |
### Eventos
| Nombre | Descripcion | Parametros |
|---------- |-------- |---------- |
| change | triggers when data items change in the right list | key array of current data items in the right list, transfer direction (left or right), moved item keys |
| change | se lanzá cuando los elementos cambian en la lista de la derecha | array con las claves de los elementos de la lista de la derecha |
examples/docs/es/transition.md
View file @ 8d6950fa
## Built-in transition
## Transiciones incorporadas
You can use Element's built-in transitions directly. Before that, please read the [transition docs](https://vuejs.org/v2/api/#transition).
Puedes usar directamente las transiciones incorporadas en Element. Antes de hacerlo, por favor lea la [documentación](https://vuejs.org/v2/api/#transition).
### fade
### Fade
:::demo We have two fading effects: `el-fade-in-linear` and `el-fade-in`.
:::demo Tenemos dos efectos de fading: `el-fade-in-linear` y `el-fade-in`.
```html
<template>
<div>
......@@ -46,9 +46,9 @@ You can use Element's built-in transitions directly. Before that, please read th
```
:::
### zoom
### Zoom
:::demo `el-zoom-in-center`, `el-zoom-in-top` and `el-zoom-in-bottom` are provided.
:::demo También tenemos zoom: `el-zoom-in-center`, `el-zoom-in-top` y `el-zoom-in-bottom`.
```html
<template>
<div>
......@@ -96,10 +96,8 @@ You can use Element's built-in transitions directly. Before that, please read th
:::
### collapse
For collapse effect, use the `el-collapse-transition` component.
### Colapsado
Para efectos de colapsado usar el componente `el-collapse-transition`.
:::demo
```html
<template>
......@@ -147,7 +145,7 @@ For collapse effect, use the `el-collapse-transition` component.
```js
// fade/zoom
import 'element-ui/lib/theme-chalk/base.css';
// collapse
// colapsar
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
......
examples/docs/es/tree.md
View file @ 8d6950fa
This diff is collapsed.
examples/docs/es/upload.md
View file @ 8d6950fa
This diff is collapsed.
examples/docs/zh-CN/select.md
View file @ 8d6950fa
......@@ -101,6 +101,7 @@
value8: '',
value9: '',
value10: [],
value11: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
};
......@@ -319,7 +320,7 @@
适用性较广的基础多选，用 Tag 展示已选项
:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组
:::demo 为`el-select`设置`multiple`属性即可启用多选，此时`v-model`的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现，你也可以设置`collapse-tags`属性将它们合并为一段文字。
```html
<template>
<el-select v-model="value5" multiple placeholder="请选择">
......@@ -330,6 +331,20 @@
:value="item.value">
</el-option>
</el-select>
<el-select
v-model="value11"
multiple
collapse-tags
style="margin-left: 20px;"
placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
......@@ -645,6 +660,7 @@
| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
| size | 输入框尺寸 | string | large/small/mini | — |
| clearable | 单选时是否可以清空选项 | boolean | — | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 |
| name | select input 的 name 属性 | string | — | — |
| placeholder | 占位符 | string | — | 请选择 |
......
examples/i18n/component.json
View file @ 8d6950fa
......@@ -64,32 +64,32 @@
{
"lang": "es",
"demo-block": {
"hide-text": "Hide",
"show-text": "Expand",
"button-text": "Try it!",
"tooltip-text": "Run this demo on jsfiddle.net"
"hide-text": "Ocultar",
"show-text": "Mostrar",
"button-text": "Probar",
"tooltip-text": "Prueba este ejemplo en jsfiddle.net"
},
"footer": {
"links": "Links",
"links": "Enlaces",
"repo": "GitHub",
"community": "Community",
"changelog": "Changelog",
"theme": "Theme CLI tool",
"preview": "Online theme generator",
"community": "Comunidad",
"changelog": "Lista de cambios",
"theme": "Generador de temas por CLI",
"preview": "Generador de temas en línea",
"faq": "FAQ",
"gitter": "Gitter",
"starter": "Starter kit",
"feedback": "Feedback",
"contribution": "Contribution",
"starter": "Kit de inicio",
"feedback": "Comentarios",
"contribution": "Contribución",
"eleme": "Eleme"
},
"header": {
"guide": "Guide",
"components": "Component",
"resource": "Resource"
"guide": "Guía",
"components": "Componentes",
"resource": "Recursos"
},
"nav": {
"dropdown": "Version: "
"dropdown": "Versión: "
}
}
]
examples/i18n/page.json
View file @ 8d6950fa
This diff is collapsed.
examples/i18n/title.json
View file @ 8d6950fa
......@@ -12,9 +12,9 @@
"resource": "Resource | Element"
},
"es": {
"home": "Element - A Desktop UI Toolkit for Web",
"guide": "Guide | Element",
"component": "Component | Element",
"resource": "Resource | Element"
"home": "Element - Un kit de interfaz de usuario para la web",
"guide": "Guía | Element",
"component": "Componentes | Element",
"resource": "Recursos | Element"
}
}
examples/nav.config.json
View file @ 8d6950fa
......@@ -10,7 +10,7 @@
},
{
"name": "Element Angular",
"href": "https://eleme.github.io/element-angular/"
"href": "https://element-angular.faas.ele.me/"
},
{
"name": "开发指南",
......@@ -260,7 +260,7 @@
},
{
"name": "Element Angular",
"href": "https://eleme.github.io/element-angular/"
"href": "https://element-angular.faas.ele.me/"
},
{
"name": "Development",
......
examples/versions.json
View file @ 8d6950fa
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.3":"2.0"}
\ No newline at end of file
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.9":"1.4","2.0.4":"2.0"}
\ No newline at end of file
package.json
View file @ 8d6950fa
{
"name": "element-ui",
"version": "2.0.3",
"version": "2.0.4",
"description": "A Component Library for Vue.js.",
"main": "lib/element-ui.common.js",
"files": [
......@@ -82,6 +82,7 @@
"css-loader": "^0.28.7",
"es6-promise": "^4.0.5",
"eslint": "^3.10.2",
"eslint-plugin-json": "^1.2.0",
"extract-text-webpack-plugin": "^3.0.1",
"file-loader": "^1.1.5",
"file-save": "^0.2.0",
......
packages/cascader/src/main.vue
View file @ 8d6950fa
......@@ -10,9 +10,12 @@
]"
@click="handleClick"
@mouseenter="inputHover = true"
@focus="inputHover = true"
@mouseleave="inputHover = false"
@blur="inputHover = false"
ref="reference"
v-clickoutside="handleClickoutside"
@keydown="handleKeydown"
>
<el-input
ref="input"
......@@ -63,6 +66,7 @@ import emitter from 'element-ui/src/mixins/emitter';
import Locale from 'element-ui/src/mixins/locale';
import { t } from 'element-ui/src/locale';
import debounce from 'throttle-debounce/debounce';
import { generateId } from 'element-ui/src/utils/util';
const popperMixin = {
props: {
......@@ -149,6 +153,10 @@ export default {
beforeFilter: {
type: Function,
default: () => (() => {})
},
hoverThreshold: {
type: Number,
default: 500
}
},
......@@ -191,11 +199,15 @@ export default {
},
cascaderSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
},
id() {
return generateId();
}
},
watch: {
menuVisible(value) {
this.$refs.input.$refs.input.setAttribute('aria-expanded', value);
value ? this.showMenu() : this.hideMenu();
},
value(value) {
......@@ -204,6 +216,10 @@ export default {
currentValue(value) {
this.dispatch('ElFormItem', 'el.form.change', [value]);
},
currentLabels(value) {
const inputLabel = this.showAllLevels ? value.join('/') : value[value.length - 1] ;
this.$refs.input.$refs.input.setAttribute('value', inputLabel);
},
options: {
deep: true,
handler(value) {
......@@ -224,10 +240,13 @@ export default {
this.menu.expandTrigger = this.expandTrigger;
this.menu.changeOnSelect = this.changeOnSelect;
this.menu.popperClass = this.popperClass;
this.menu.hoverThreshold = this.hoverThreshold;
this.popperElm = this.menu.$el;
this.menu.$refs.menus[0].setAttribute('id', `cascader-menu-${this.id}`);
this.menu.$on('pick', this.handlePick);
this.menu.$on('activeItemChange', this.handleActiveItemChange);
this.menu.$on('menuLeave', this.doDestroy);
this.menu.$on('closeInside', this.handleClickoutside);
},
showMenu() {
if (!this.menu) {
......@@ -245,6 +264,7 @@ export default {
hideMenu() {
this.inputValue = '';
this.menu.visible = false;
this.$refs.input.focus();
},
handleActiveItemChange(value) {
this.$nextTick(_ => {
......@@ -252,6 +272,23 @@ export default {
});
this.$emit('active-item-change', value);
},
handleKeydown(e) {
const keyCode = e.keyCode;
if (keyCode === 13) {
this.handleClick();
} else if (keyCode === 40) { // down
this.menuVisible = true; // 打开
setTimeout(() => {
const firstMenu = this.popperElm.querySelectorAll('.el-cascader-menu')[0];
firstMenu.querySelectorAll("[tabindex='-1']")[0].focus();
});
e.stopPropagation();
e.preventDefault();
} else if (keyCode === 27 || keyCode === 9) { // esc tab
this.inputValue = '';
if (this.menu) this.menu.visible = false;
}
},
handlePick(value, close = true) {
this.currentValue = value;
this.$emit('input', value);
......
packages/cascader/src/menu.vue
View file @ 8d6950fa
<script>
import { isDef } from 'element-ui/src/utils/shared';
import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
import { generateId } from 'element-ui/src/utils/util';
const copyArray = (arr, props) => {
if (!arr || !Array.isArray(arr) || !props) return arr;
......@@ -39,7 +40,8 @@
value: [],
expandTrigger: 'click',
changeOnSelect: false,
popperClass: ''
popperClass: '',
hoverTimer: 0
};
},
......@@ -94,6 +96,9 @@
formatOptions(optionsCopy);
return loadActiveOptions(optionsCopy);
}
},
id() {
return generateId();
}
},
......@@ -135,11 +140,41 @@
activeOptions,
visible,
expandTrigger,
popperClass
popperClass,
hoverThreshold
} = this;
let itemId = null;
let itemIndex = 0;
let hoverMenuRefs = {};
const hoverMenuHandler = e => {
const offsetX = e.offsetX;
const width = hoverMenuRefs.activeMenu.offsetWidth;
const height = hoverMenuRefs.activeMenu.offsetHeight;
if (e.target === hoverMenuRefs.activeItem) {
clearTimeout(this.hoverTimer);
const {activeItem} = hoverMenuRefs;
const offsetY_top = activeItem.offsetTop;
const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
hoverMenuRefs.hoverZone.innerHTML = `
<path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
<path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
`;
} else {
if (!this.hoverTimer) {
this.hoverTimer = setTimeout(() => {
hoverMenuRefs.hoverZone.innerHTML = '';
}, hoverThreshold);
}
}
};
const menus = this._l(activeOptions, (menu, menuIndex) => {
let isFlat = false;
const menuId = `menu-${this.id}-${ menuIndex}`;
const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
const items = this._l(menu, item => {
const events = {
on: {}
......@@ -148,12 +183,52 @@
if (item.__IS__FLAT__OPTIONS) isFlat = true;
if (!item.disabled) {
// keydown up/down/left/right/enter
events.on.keydown = (ev) => {
const keyCode = ev.keyCode;
if (![37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) > -1) {
return;
}
const currentEle = ev.target;
const parentEle = this.$refs.menus[menuIndex];
const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
let nextIndex, nextMenu;
if ([38, 40].indexOf(keyCode) > -1) {
if (keyCode === 38) { // up键
nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
} else if (keyCode === 40) { // down
nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
}
menuItemList[nextIndex].focus();
} else if (keyCode === 37) { // left键
if (menuIndex !== 0) {
const previousMenu = this.$refs.menus[menuIndex - 1];
previousMenu.querySelector('[aria-expanded=true]').focus();
}
} else if (keyCode === 39) { // right
if (item.children) {
// 有子menu 选择子menu的第一个menuitem
nextMenu = this.$refs.menus[menuIndex + 1];
nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
}
} else if (keyCode === 13) {
if (!item.children) {
const id = currentEle.getAttribute('id');
parentEle.setAttribute('aria-activedescendant', id);
this.select(item, menuIndex);
this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
}
} else if (keyCode === 9 || keyCode === 27) { // esc tab
this.$emit('closeInside');
}
};
if (item.children) {
let triggerEvent = {
click: 'click',
hover: 'mouseenter'
}[expandTrigger];
events.on[triggerEvent] = () => {
events.on[triggerEvent] = events.on['focus'] = () => { // focus 选中
this.activeItem(item, menuIndex);
this.$nextTick(() => {
// adjust self and next level
......@@ -168,7 +243,10 @@
};
}
}
if (!item.disabled && !item.children) { // no children set id
itemId = `${menuId}-${itemIndex}`;
itemIndex++;
}
return (
<li
class={{
......@@ -177,7 +255,14 @@
'is-active': item.value === activeValue[menuIndex],
'is-disabled': item.disabled
}}
ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
{...events}
tabindex= { item.disabled ? null : -1 }
role="menuitem"
aria-haspopup={ !!item.children }
aria-expanded={ item.value === activeValue[menuIndex] }
id = { itemId }
aria-owns = { !item.children ? null : ownsId }
>
{item.label}
</li>
......@@ -188,19 +273,68 @@
menuStyle.minWidth = this.inputWidth + 'px';
}
const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
const hoverMenuEvent = {
on: {
}
};
if (isHoveredMenu) {
hoverMenuEvent.on.mousemove = hoverMenuHandler;
menuStyle.position = 'relative';
}
return (
<ul
class={{
'el-cascader-menu': true,
'el-cascader-menu--flexible': isFlat
}}
{...hoverMenuEvent}
style={menuStyle}
refInFor
ref="menus">
ref="menus"
role="menu"
id = { menuId }
>
{items}
{
isHoveredMenu
? (<svg
ref="hoverZone"
style={{
position: 'absolute',
top: 0,
height: '100%',
width: '100%',
left: 0,
pointerEvents: 'none'
}}
></svg>) : null
}
</ul>
);
});
if (expandTrigger === 'hover') {
this.$nextTick(() => {
const activeItem = this.$refs.activeItem;
if (activeItem) {
const activeMenu = activeItem.parentElement;
const hoverZone = this.$refs.hoverZone;
hoverMenuRefs = {
activeMenu,
activeItem,
hoverZone
};
} else {
hoverMenuRefs = {};
}
});
}
return (
<transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
<div
......
packages/dropdown/src/dropdown-item.vue
View file @ 8d6950fa
......@@ -6,6 +6,8 @@
'el-dropdown-menu__item--divided': divided
}"
@click="handleClick"
:aria-disabled="disabled"
:tabindex="disabled ? null : -1"
>
<slot></slot>
</li>
......
packages/dropdown/src/dropdown.vue
View file @ 8d6950fa
This diff is collapsed.
packages/menu/src/menu.vue
View file @ 8d6950fa
This diff is collapsed.
packages/menu/src/submenu.vue
View file @ 8d6950fa
This diff is collapsed.
packages/message/src/main.vue
View file @ 8d6950fa
This diff is collapsed.
packages/notification/src/main.vue
View file @ 8d6950fa
This diff is collapsed.
packages/popover/src/main.vue
View file @ 8d6950fa
This diff is collapsed.
packages/radio/src/radio-group.vue
View file @ 8d6950fa
This diff is collapsed.
packages/select/src/option-group.vue
View file @ 8d6950fa
<template>
<ul class="el-select-group__wrap">
<li class="el-select-group__title" v-show="visible">{{ label }}</li>
<ul class="el-select-group__wrap" v-show="visible">
<li class="el-select-group__title">{{ label }}</li>
<li>
<ul class="el-select-group">
<slot></slot>
......
packages/select/src/select.vue
View file @ 8d6950fa
This diff is collapsed.
packages/table/src/table-header.js
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/package.json
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/cascader.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/checkbox.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/common/var.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/dropdown.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/popover.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/radio.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/select.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/table.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/tooltip.scss
View file @ 8d6950fa
This diff is collapsed.
packages/theme-chalk/src/tree.scss
View file @ 8d6950fa
This diff is collapsed.
packages/tooltip/src/main.js
View file @ 8d6950fa
This diff is collapsed.
packages/tree/src/model/tree-store.js
View file @ 8d6950fa
This diff is collapsed.
packages/tree/src/tree-node.vue
View file @ 8d6950fa
This diff is collapsed.
packages/tree/src/tree.vue
View file @ 8d6950fa
This diff is collapsed.
packages/upload/src/ajax.js
View file @ 8d6950fa
This diff is collapsed.
src/index.js
View file @ 8d6950fa
This diff is collapsed.
src/utils/clickoutside.js
View file @ 8d6950fa
This diff is collapsed.
test/unit/specs/upload.spec.js
View file @ 8d6950fa
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment