Skip to content

E
Element
Commit 11b29e14 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

Merge pull request #8123 from Gonzalo2310/es-doc 

Cascader / dropdown / i18n spanish version
parents cb9a1cb3 0d8a123a
Hide whitespace changes
Inline Side-by-side
Showing with 520 additions and 487 deletions
examples/docs/es/cascader.md
View file @ 11b29e14
...@@ -280,13 +280,14 @@ ...@@ -280,13 +280,14 @@
## Cascader ## Cascader
If the options have a clear hierarchical structure, Cascader can be used to view and select them. Si las opciones tienen una estructura jerárquica clara, Cascader puede utilizarse para visualizarlas y seleccionarlas.
### Basic usage ### Uso básico
There are two ways to expand child option items. Existen dos maneras de expandir los elementos hijo de la opción.
:::demo Al asignar al atributo `options` un array de opciones, se genera un Cascader. El atributo `expand-trigger` define cómo se expanden las opciones hijo. Este ejemplo también muestra el evento `change` , cuyo parámetro es el valor de Cascader, un array formado por los valores de cada nivel seleccionado.
:::demo Assigning the `options` attribute to an array of options renders a Cascader. The `expand-trigger` attribute defines how child options are expanded. This example also demonstrates the `change` event, whose parameter is the value of Cascader, an array made up of the values of each selected level.
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">Child options expand when clicked (default)</span> <span class="demonstration">Child options expand when clicked (default)</span>
...@@ -519,11 +520,12 @@ There are two ways to expand child option items. ...@@ -519,11 +520,12 @@ There are two ways to expand child option items.
``` ```
::: :::
### Disabled option ### Opcion Disabled
Para desactivar una opción configure un campo `disabled` en el objeto de opción.
Disable an option by setting a `disabled` field in the option object. :::demo En este ejemplo, el primer elemento del array `options` tiene un campo `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera.
:::demo In this example, the first item in `options` array has a `disabled: true` field, so it is disabled. By default, Cascader checks the `disabled` field in each option object; if you are using another field name to indicate whether an option is disabled, you can assign it in the `props` attribute (see the API table below for details). And of course, field name `value`, `label` and `children` can also be customized in the same way.
```html ```html
<el-cascader <el-cascader
:options="optionsWithDisabled" :options="optionsWithDisabled"
...@@ -735,11 +737,12 @@ Disable an option by setting a `disabled` field in the option object. ...@@ -735,11 +737,12 @@ Disable an option by setting a `disabled` field in the option object.
``` ```
::: :::
### Display only the last level ### Mostrar sólo el último nivel
The input can display only the last level instead of all levels. Puede mostrar sólo el último nivel en lugar de todos los niveles.
:::demo El atributo `show-all-levels` define si se visualizan todos los niveles. Si es `false`, sólo se muestra el último nivel.
:::demo The `show-all-levels` attribute defines if all levels are displayed. If it is `false`, only the last level is displayed.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
...@@ -951,9 +954,9 @@ The input can display only the last level instead of all levels. ...@@ -951,9 +954,9 @@ The input can display only the last level instead of all levels.
``` ```
::: :::
### With default value ### Con valor por defecto
:::demo The default value can be defined with an array. :::demo El valor por defecto se puede definir con un array.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
...@@ -1168,9 +1171,10 @@ The input can display only the last level instead of all levels. ...@@ -1168,9 +1171,10 @@ The input can display only the last level instead of all levels.
### Change on select ### Change on select
Parent options can also be selected. También se pueden seleccionar las opciones del elemento padre.
:::demo Por defecto sólo se pueden seleccionar las opciones del último nivel. Al asignar `change-on-select` a `true`, también se pueden seleccionar opciones en los niveles superiores.
:::demo By default only the options in the last level can be selected. By assigning `change-on-select` to `true`, options in parent levels can also be selected.
```html ```html
<el-cascader <el-cascader
:options="options" :options="options"
...@@ -1382,11 +1386,12 @@ Parent options can also be selected. ...@@ -1382,11 +1386,12 @@ Parent options can also be selected.
``` ```
::: :::
### Dynamically load child options ### Carga dinamica de elementos hijos
Load child options when their parent option is clicked or hovered over. Se puede hacer una carga dinamica de elementos hijos cuando se hace clic en el elemento padre o se pasa el ratón sobre el.
:::demo En este ejemplo, el array de opciones no tiene datos de ciudades cuando se inicializa. Con el evento `active-item-change`, puede cargar dinámicamente las ciudades de un estado específico. Además, este ejemplo también demuestra cómo se utilizan los`props`.
:::demo In this example, the options array does not have data of cities when initialized. With the `active-item-change` event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how `props` is used.
```html ```html
<el-cascader <el-cascader
:options="options2" :options="options2"
...@@ -1433,11 +1438,12 @@ Load child options when their parent option is clicked or hovered over. ...@@ -1433,11 +1438,12 @@ Load child options when their parent option is clicked or hovered over.
``` ```
::: :::
### Filterable ### Filtrable
Buscar y seleccionar opciones con una palabra clave.
Search and select options with a keyword. :::demo Añadir `filterable` a `el-cascader` permite filtrar
:::demo Adding `filterable` to `el-cascader` enables filtering
```html ```html
<div class="block"> <div class="block">
<span class="demonstration">Only options of the last level can be selected</span> <span class="demonstration">Only options of the last level can be selected</span>
...@@ -1663,34 +1669,35 @@ Search and select options with a keyword. ...@@ -1663,34 +1669,35 @@ Search and select options with a keyword.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Options | Default| | Atributo | Descripción | Tipo | Opciones | Por defecto |
|---------- |-------------------- |---------|------------- |-------- | | ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
| options | data of the options | array | — | — | | options | datos de las opciones | array | — | — |
| props | configuration options, see the following table | object | — | — | | props | opciones de configuration, mire la tabla siguiente | object | — | — |
| value | selected value | array | — | — | | value | valor seleccionado | array | — | — |
| popper-class | custom class name for Cascader's dropdown | string | — | — | | popper-class | nombre de clase para el Cascader's dropdown | string | — | — |
| placeholder | input placeholder | string | — | Select | | placeholder | input placeholder | string | — | Select |
| disabled | whether Cascader is disabled | boolean | — | false | | disabled | si Cascader esta disabled | boolean | — | false |
| clearable | whether selected value can be cleared | boolean | — | false | | clearable | si se puede borrar el valor seleccionado | boolean | — | false |
| expand-trigger | trigger mode of expanding current item | string | click / hover | click | | expand-trigger | evento del elemento actual para expandirse. | string | click / hover | click |
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true | | show-all-levels | si mostrar todos los niveles del valor seleccionado en la entrada | boolean | — | true |
| filterable | whether the options can be searched | boolean | — | — | | filterable | si se pueden buscar las opciones | boolean | — | — |
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | | debounce | retardo al escribir la palabra clave del filtro, en milisegundos | number | — | 300 |
| change-on-select | whether selecting an option of any level is permitted | boolean | — | false | | change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean | — | false |
| size | size of Input | string | medium / small / mini | — | | size | tamaño del input | string | medium / small / mini | — |
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | | before-filter | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | — | — |
### props ### props
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| --------- | ----------------- | ------ | ------ | ------ | | -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| label | specify which key of option object is used as the option's label | string | — | — | | label | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | — | — |
| value | specify which key of option object is used as the option's value | string | — | — | | value | especifica qué clave del elemento de la opción se utiliza como valor | string | — | — |
| children | specify which key of option object is used as the option's child options | string | — | — | | children | especifica qué clave del elemento de la opción se utiliza como hijo | string | — | — |
| disabled | specify which key of option object indicates if the option is disabled | string | — | — | | disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | — | — |
### Eventos
| Nombre | Descripción | Parametros |
| ------------------ | ---------------------------------------- | ------------------------- |
| change | se dispara cuando el valor cambia | valor |
| active-item-change | se dispara cuando cambia la opción activa, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas |
### Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | value |
| active-item-change | triggers when active option changes, only works when `change-on-select` is `false` | an array of active options |
examples/docs/es/dropdown.md
View file @ 11b29e14
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.demo-box { .demo-box {
.el-dropdown { .el-dropdown {
vertical-align: top; vertical-align: top;
& + .el-dropdown { & + .el-dropdown {
margin-left: 15px; margin-left: 15px;
} }
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;
border-right: 1px solid #eff2f6; border-right: 1px solid #eff2f6;
&:last-child { &:last-child {
border-right: 0; border-right: 0;
} }
...@@ -51,12 +51,12 @@ ...@@ -51,12 +51,12 @@
} }
</script> </script>
## Dropdown ## Dropdown
Toggleable menu for displaying lists of links and actions. Menú conmutable para visualizar listas de enlaces y acciones.
### Basic usage ### Uso básico
Hover on the dropdown menu to unfold it for more actions. Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.
:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it. :::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.
```html ```html
<el-dropdown> <el-dropdown>
...@@ -86,11 +86,12 @@ Hover on the dropdown menu to unfold it for more actions. ...@@ -86,11 +86,12 @@ Hover on the dropdown menu to unfold it for more actions.
::: :::
### Triggering element Elemento detonante
Use the button to trigger the dropdown list. Utilizando un botón para activar la lista desplegable.
:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four.
```html ```html
<el-dropdown> <el-dropdown>
<el-button type="primary"> <el-button type="primary">
...@@ -139,11 +140,11 @@ Use the button to trigger the dropdown list. ...@@ -139,11 +140,11 @@ Use the button to trigger the dropdown list.
``` ```
::: :::
### How to trigger ### Cómo detonar el evento
Click the triggering element or hover on it. Haga clic en el elemento detonante o sobre él.
:::demo Use the attribute `trigger`. By default, it is `hover`. :::demo Utilice el atributo `trigger`. Por defecto, es `hover`.
```html ```html
<el-row class="block-col-2"> <el-row class="block-col-2">
...@@ -197,11 +198,12 @@ Click the triggering element or hover on it. ...@@ -197,11 +198,12 @@ Click the triggering element or hover on it.
``` ```
::: :::
### Menu hiding behavior ### Ocultamiento del menú
Use `hide-on-click` para definir si el menú se cierra al hacer clic.
Use `hide-on-click` to define if menu closes on clicking. :::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.
:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
```html ```html
<el-dropdown :hide-on-click="false"> <el-dropdown :hide-on-click="false">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
...@@ -228,9 +230,9 @@ Use `hide-on-click` to define if menu closes on clicking. ...@@ -228,9 +230,9 @@ Use `hide-on-click` to define if menu closes on clicking.
``` ```
::: :::
### Command event ### Evento command
Clicking each dropdown item fires an event whose parameter is assigned by each item. Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.
:::demo :::demo
```html ```html
...@@ -269,11 +271,11 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i ...@@ -269,11 +271,11 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
``` ```
::: :::
### Sizes ### Tamaños
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios. Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. :::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
```html ```html
<el-dropdown split-button type="primary"> <el-dropdown split-button type="primary">
...@@ -319,28 +321,28 @@ Besides default size, Dropdown component provides three additional sizes for you ...@@ -319,28 +321,28 @@ Besides default size, Dropdown component provides three additional sizes for you
::: :::
### Dropdown Attributes ### Dropdown atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — | | type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — |
| size | menu size, also works on the split button | string | medium / small / mini | — | | size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — |
| split-button | whether a button group is displayed | boolean | — | false | | split-button | si se visualiza un grupo de botones | boolean | — | false |
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | | placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | how to trigger | string | hover/click | hover | | trigger | cómo detonar | string | hover/click | hover |
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true | | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true |
| show-timeout | Delay time before show a dropdown | number | — | 250 | | show-timeout | Tiempo de retardo antes de mostrar un dropdown | number | — | 250 |
| hide-timeout | Delay time before hide a dropdown | number | — | 150 | | hide-timeout | Tiempo de retardo antes de ocultar un dropdown | number | — | 150 |
### Dropdown Events ### Dropdown Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | | -------------- | ---------------------------------------- | ---------------------------------------- |
| click | if `split-button` is `true`, triggers when left button is clicked | — | | click | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | — |
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item | | command | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | | visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
### Dropdown Menu Item Attributes ### Dropdown Menu Item Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|------------- |---------------- |---------------- |---------------------- |-------- | | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — | | command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false | | disabled | si el elemento está desactivado | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false | | divided | si se visualiza un divisor | boolean | — | false |
examples/docs/es/form.md
View file @ 11b29e14
...@@ -176,17 +176,17 @@ ...@@ -176,17 +176,17 @@
.el-form { .el-form {
width: 480px; width: 480px;
} }
.line { .line {
text-align: center; text-align: center;
} }
.el-checkbox-group { .el-checkbox-group {
width: 320px; width: 320px;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
&:after, &:before { &:after, &:before {
content: ' '; content: ' ';
display: table; display: table;
...@@ -197,14 +197,14 @@ ...@@ -197,14 +197,14 @@
font-size: 0; font-size: 0;
height: 0; height: 0;
} }
.el-checkbox { .el-checkbox {
float: left; float: left;
width: 160px; width: 160px;
padding-right: 20px; padding-right: 20px;
margin: 0; margin: 0;
padding: 0; padding: 0;
+ .el-checkbox { + .el-checkbox {
margin-left: 0; margin-left: 0;
} }
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
} }
.demo-form-inline { .demo-form-inline {
width: auto; width: auto;
.el-input { .el-input {
width: 150px; width: 150px;
} }
...@@ -225,7 +225,7 @@ ...@@ -225,7 +225,7 @@
} }
.demo-ruleForm { .demo-ruleForm {
width: 480px; width: 480px;
.el-select .el-input { .el-select .el-input {
width: 360px; width: 360px;
} }
...@@ -245,13 +245,13 @@ ...@@ -245,13 +245,13 @@
## Form ## Form
Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data. Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
### Basic form ### Form básico
It includes all kinds of input items, such as `input`, `select`, `radio` and `checkbox`. Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`.
:::demo In each `form` component, you need a `form-item` field to be the container of your input item. :::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item.
```html ```html
<el-form ref="form" :model="form" label-width="120px"> <el-form ref="form" :model="form" label-width="120px">
...@@ -325,17 +325,17 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch ...@@ -325,17 +325,17 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
::: :::
:::tip :::tip
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that [W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i> > <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>
To prevent this behavior, you can add `@submit.native.prevent` on `<el-form>`. Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
::: :::
### Inline form ### Formulario inline
When the vertical space is limited and the form is relatively simple, you can put it in one line. Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.
:::demo Set the `inline` attribute to `true` and the form will be inline. :::demo Establezca el atributo `inline` como `true` y el formulario sera inline.
```html ```html
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
...@@ -372,12 +372,14 @@ When the vertical space is limited and the form is relatively simple, you can pu ...@@ -372,12 +372,14 @@ When the vertical space is limited and the form is relatively simple, you can pu
``` ```
::: :::
### Alignment ### Alineamiento
Depending on your design, there are several different ways to align your label element. Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field. :::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario.
```html ```html
<el-radio-group v-model="labelPosition" size="small"> <el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">Left</el-radio-button> <el-radio-button label="left">Left</el-radio-button>
...@@ -413,11 +415,11 @@ Depending on your design, there are several different ways to align your label e ...@@ -413,11 +415,11 @@ Depending on your design, there are several different ways to align your label e
``` ```
::: :::
### Validation ### Validación
Form component allows you to verify your data, helping you find and correct errors. El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at [async-validator](https://github.com/yiminghe/async-validator). :::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator).
```html ```html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
...@@ -528,11 +530,12 @@ Form component allows you to verify your data, helping you find and correct erro ...@@ -528,11 +530,12 @@ Form component allows you to verify your data, helping you find and correct erro
``` ```
::: :::
### Custom validation rules ### Reglas personalizadas de validación
Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.
This example shows how to customize your own validation rules to finish a two-factor password verification. :::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
:::demo Here we use `status-icon` to reflect validation result as an icon.
```html ```html
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm"> <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
<el-form-item label="Password" prop="pass"> <el-form-item label="Password" prop="pass">
...@@ -626,9 +629,9 @@ This example shows how to customize your own validation rules to finish a two-fa ...@@ -626,9 +629,9 @@ This example shows how to customize your own validation rules to finish a two-fa
``` ```
::: :::
### Delete or add form items dynamically ### Eliminar o agregar validaciones dinamicamente
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically. :::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica.
```html ```html
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic"> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
...@@ -704,9 +707,10 @@ This example shows how to customize your own validation rules to finish a two-fa ...@@ -704,9 +707,10 @@ This example shows how to customize your own validation rules to finish a two-fa
``` ```
::: :::
### Number Validate ### Validación numerica
::: demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
```html ```html
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
<el-form-item <el-form-item
...@@ -754,14 +758,17 @@ This example shows how to customize your own validation rules to finish a two-fa ...@@ -754,14 +758,17 @@ This example shows how to customize your own validation rules to finish a two-fa
::: :::
:::tip :::tip
When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`.
::: :::
### Size control ### Tamaño del control
Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute. ::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
```html ```html
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini"> <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<el-form-item label="Activity name"> <el-form-item label="Activity name">
...@@ -826,52 +833,52 @@ All components in a Form inherit their `size` attribute from that Form. Similarl ...@@ -826,52 +833,52 @@ All components in a Form inherit their `size` attribute from that Form. Similarl
``` ```
::: :::
### Form Attributes ### Form Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---- | ----| ---- | ---- | ---- | | -------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
| model| data of form component | object | — | — | | model | Datos del componente | object | — | — |
| rules | validation rules of form | object | — | — | | rules | Reglas de validación | object | — | — |
| inline | whether the form is inline | boolean | — | false | | inline | Si el form es inline | boolean | — | false |
| label-position | position of label | string | left / right / top | right | | label-position | Posicion de la etiqueta | string | left / right / top | right |
| label-width | width of label, and all its direct child form items will inherit this value | string | — | — | | label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — |
| label-suffix | suffix of the label | string | — | — | | label-suffix | sufijo de la etiqueta | string | — | — |
| show-message | whether to show the error message | boolean | — | true | | show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | whether to display the error message inline with the form item | boolean | — | false | | inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
| status-icon | whether to display an icon indicating the validation result | boolean | — | false | | status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
| size | control the size of components in this form | string | medium / small / mini | - | | size | el tamaño de los componentes en este form | string | medium / small / mini | - |
### Form Methods ### Form Metodos
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
| ---- | ---- | ---- | | ------------- | ---------------------------------------- | ---------------------------------------- |
| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) | | validate | el método para validar todo el formulario. Devuelve una promesa si se omite el return | Function(callback: Function(boolean)) |
| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) | | validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
| resetFields | reset all the fields and remove validation result | — | | resetFields | restablece todos los campos y elimina el resultado de validación | — |
| clearValidate | clear validation message for all fields | - | clearValidate | limpia mensaje de validación para todos los campos | -
### Form-Item Attributes ### Form-Item Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ---- | ----| ---- | ---- | ---- | | -------------- | ---------------------------------------- | ------- | ----------------------------------- | ----------- |
| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | keys of model that passed to `form` | | prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | |
| label | label | string | — | — | | label | etiqueta | string | — | — |
| label-width | width of label, e.g. '50px' | string | — | — | | label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false | | required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string | — | false |
| rules | validation rules of form | object | — | — | | rules | reglas de validacion del form | object | — | — |
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — | | error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
| show-message | whether to show the error message | boolean | — | true | | show-message | si mostrar o no el mensaje de error | boolean | — | true |
| inline-message | inline style validate message | boolean | — | false | | inline-message | mensaje de validación estilo inline | boolean | — | false |
| size | control the size of components in this form-item | string | medium / small / mini | - | | size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
### Form-Item Slot ### Form-Item Slot
| Name | Description | | Nombre | Descripción |
|------|--------| | ------ | ------------------------ |
| — | content of Form Item | | — | contenido del Form Item |
| label | content of label | | label | contenido de la etiqueta |
### Form-Item Methods ### Form-Item Metodo
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
| ---- | ---- | ---- | | ---------- | ---------------------------------------- | ---------- |
| resetField | reset current field and remove validation result | — | | resetField | restablecer campo actual y eliminar resultado de validación | — |
examples/docs/es/i18n.md
View file @ 11b29e14
## Internationalization ## Internacionalización
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely: El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -10,7 +10,7 @@ import locale from 'element-ui/lib/locale/lang/en' ...@@ -10,7 +10,7 @@ import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })
``` ```
Or if you are importing Element on demand: O si está importando Element a petición:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -26,7 +26,7 @@ Vue.component(Button.name, Button) ...@@ -26,7 +26,7 @@ Vue.component(Button.name, Button)
Vue.component(Select.name, Select) Vue.component(Select.name, Select)
``` ```
The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale: El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
webpack.config.js webpack.config.js
```javascript ```javascript
...@@ -37,9 +37,9 @@ webpack.config.js ...@@ -37,9 +37,9 @@ webpack.config.js
} }
``` ```
## Compatible with `vue-i18n@5.x` ## Compatible con `vue-i18n@5.x`
Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier. Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -56,8 +56,8 @@ Vue.locale('zh-cn', zhLocale) ...@@ -56,8 +56,8 @@ Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale) Vue.locale('en', enLocale)
``` ```
## Compatible with other i18n plugins ## Compatible con otros plugins i18n
Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n. Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -72,9 +72,9 @@ Vue.use(Element, { ...@@ -72,9 +72,9 @@ Vue.use(Element, {
}) })
``` ```
## Compatible with `vue-i18n@6.x` ## Compatible con `vue-i18n@6.x`
You need to manually handle it for compatibility with `6.x`. Necesita manejarlo manualmente para ser compatible con `6.x`.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -108,7 +108,7 @@ Vue.use(Element, { ...@@ -108,7 +108,7 @@ Vue.use(Element, {
new Vue({ i18n }).$mount('#app') new Vue({ i18n }).$mount('#app')
``` ```
## Custom i18n in on-demand components ## Personalización de i18n en componentes bajo petición
```js ```js
import Vue from 'vue' import Vue from 'vue'
...@@ -141,7 +141,7 @@ const i18n = new VueI18n({ ...@@ -141,7 +141,7 @@ const i18n = new VueI18n({
ElementLocale.i18n((key, value) => i18n.t(key, value)) ElementLocale.i18n((key, value) => i18n.t(key, value))
``` ```
## Import via CDN ## Importar via CDN
```html ```html
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
...@@ -153,7 +153,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value)) ...@@ -153,7 +153,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
</script> </script>
``` ```
Compatible with `vue-i18n` Compatible con `vue-i18n`
```html ```html
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
...@@ -168,7 +168,7 @@ Compatible with `vue-i18n` ...@@ -168,7 +168,7 @@ Compatible with `vue-i18n`
</script> </script>
``` ```
Currently Element ships with the following languages: Actualmente Element está disponible en los siguientes idiomas:
<ul class="language-list"> <ul class="language-list">
<li>Simplified Chinese (zh-CN)</li> <li>Simplified Chinese (zh-CN)</li>
<li>English (en)</li> <li>English (en)</li>
...@@ -209,4 +209,4 @@ Currently Element ships with the following languages: ...@@ -209,4 +209,4 @@ Currently Element ships with the following languages:
<li>Hebrew (he)</li> <li>Hebrew (he)</li>
</ul> </ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request. Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.
\ No newline at end of file
examples/docs/es/icon.md
View file @ 11b29e14
...@@ -67,11 +67,11 @@ ...@@ -67,11 +67,11 @@
## Icon ## Icon
Element provides a set of common icons. Element proporciona un conjunto de iconos propios.
### Basic usage ### Uso básico
Just assign the class name to `el-icon-iconName`. Simplemente asigna el nombre de la clase a `el-icon-iconName`.
:::demo :::demo
...@@ -84,7 +84,7 @@ Just assign the class name to `el-icon-iconName`. ...@@ -84,7 +84,7 @@ Just assign the class name to `el-icon-iconName`.
``` ```
::: :::
### Icons ### Iconos
<ul class="icon-list"> <ul class="icon-list">
<li v-for="name in icons" :key="name"> <li v-for="name in icons" :key="name">
......
examples/docs/es/input-number.md
View file @ 11b29e14
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
## InputNumber ## InputNumber
Input numerical values with a customizable range. Input de valores numéricos con un rango personalizable.
### Basic usage ### Uso básico
:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set. :::demo Vincule una variable con `v-model` en el elemento <el-input-number> y estará listo.
```html ```html
<template> <template>
...@@ -59,7 +59,7 @@ Input numerical values with a customizable range. ...@@ -59,7 +59,7 @@ Input numerical values with a customizable range.
### Disabled ### Disabled
:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`. :::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`.
```html ```html
<template> <template>
...@@ -79,9 +79,9 @@ Input numerical values with a customizable range. ...@@ -79,9 +79,9 @@ Input numerical values with a customizable range.
### Steps ### Steps
Allows you to define incremental steps. Le permite definir el nivel de incremento de los saltos.
:::demo Add `step` attribute to set the step. :::demo Añada el atributo `step` para establecer el salto.
```html ```html
<template> <template>
...@@ -99,9 +99,9 @@ Allows you to define incremental steps. ...@@ -99,9 +99,9 @@ Allows you to define incremental steps.
``` ```
::: :::
### Size ### Tamaño
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
:::demo :::demo
...@@ -127,9 +127,10 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ...@@ -127,9 +127,10 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
``` ```
::: :::
### Controls Position ### Posición de los controles
:::demo Establezca `controls-position` para decidir la posición de los botones de control.
:::demo Set `controls-position` to decide the position of control buttons.
```html ```html
<template> <template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
...@@ -151,30 +152,30 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ...@@ -151,30 +152,30 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|----| ----| ---| ----| -----| | ----------------- | ---------------------------------------- | ------- | --------------- | ---------- |
|value | binding value| number | — | — | | value | valor vinculado | number | — | — |
|min | the minimum allowed value | number | — | 0 | | min | el valor mínimo permitido | number | — | 0 |
|max | the maximum allowed value | number | — | `Infinity` | | max | el valor maximo permitido | number | — | `Infinity` |
|step | incremental step | number | — | 1 | | step | incremento (salto) | number | — | 1 |
|size | size of the component | string | large/small| — | | size | tamaño del componente | string | large/small | — |
|disabled| whether the component is disabled | boolean | — | false | | disabled | si el componente esta deshabilitado | boolean | — | false |
|controls| whether to enable the control buttons | boolean | — | true | | controls | si se activan los botones de control | boolean | — | true |
|debounce| debounce delay when typing, in milliseconds | number | — | 300 | | debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 |
|controls-position | position of the control buttons | string | right | - | | controls-position | posición de los botones de control | string | right | - |
|name | same as `name` in native input | string | — | — | | name | lo mismo que `name` en un input nativo | string | — | — |
|label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parámetros |
|----| ---- | -----| | ---------- | ------------------------------- | ------------------ |
|change | triggers when the value changes | value after change | | change | se produce cuando el valor cambia | value after change |
| blur | triggers when Input blurs | (event: Event) | | blur | se produce cuando el componente pierde el foco | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | se produce cuando el componente obtiene el foco | (event: Event) |
### Methods ### Métodos
| Method | Description | Parameters | | Método | Descripción | Parámetro |
|------|--------|-------| | ------ | ------------------------- | ---------- |
| focus | focus the Input component | - | | focus | coloca el foco en el elemento actual | - |
examples/docs/es/input.md
View file @ 11b29e14
...@@ -41,13 +41,13 @@ ...@@ -41,13 +41,13 @@
querySearch(queryString, cb) { querySearch(queryString, cb) {
var links = this.links; var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links; var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
cb(results); cb(results);
}, },
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
var links = this.links; var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links; var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
cb(results); cb(results);
...@@ -106,17 +106,17 @@ ...@@ -106,17 +106,17 @@
} }
.demo-autocomplete { .demo-autocomplete {
text-align: center; text-align: center;
.sub-title { .sub-title {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
color: #8492a6; color: #8492a6;
} }
.el-col:not(:last-child) { .el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50); border-right: 1px solid rgba(224,230,237,0.50);
} }
.el-autocomplete { .el-autocomplete {
text-align: left; text-align: left;
} }
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
li { li {
line-height: normal; line-height: normal;
padding: 7px *; padding: 7px *;
.name { .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
...@@ -144,9 +144,9 @@ ...@@ -144,9 +144,9 @@
## Input ## Input
Input data using mouse or keyboard. Ingresa datos usando el ratón o teclado.
### Basic usage ### Uso básico
::: demo ::: demo
...@@ -167,7 +167,7 @@ export default { ...@@ -167,7 +167,7 @@ export default {
### Disabled ### Disabled
::: demo Disable the Input with the `disabled` attribute. ::: demo Deshabilite el Input con el atributo `disabled`.
```html ```html
<el-input <el-input
...@@ -188,11 +188,12 @@ export default { ...@@ -188,11 +188,12 @@ export default {
``` ```
::: :::
### Input with icon ### Input con icono
Añada un icono para indicar el tipo de Input.
Add an icon to indicate input type. ::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
```html ```html
<div class="demo-input-suffix"> <div class="demo-input-suffix">
<span class="demo-input-label">Using attributes</span> <span class="demo-input-label">Using attributes</span>
...@@ -245,9 +246,9 @@ export default { ...@@ -245,9 +246,9 @@ export default {
### Textarea ### Textarea
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`. Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
::: demo Control the height by setting the `rows` prop. ::: demo Controle la altura ajustando el prop `rows`.
```html ```html
<el-input <el-input
...@@ -269,9 +270,9 @@ export default { ...@@ -269,9 +270,9 @@ export default {
``` ```
::: :::
### Autosize Textarea ### Textarea tamaño automatico
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust. El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
::: demo ::: demo
...@@ -303,11 +304,11 @@ export default { ...@@ -303,11 +304,11 @@ export default {
``` ```
::: :::
### Mixed input ### Mezclando elementos con input
Prepend or append an element, generally a label or a button. Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
::: demo Use `slot` to distribute elements that prepend or append to Input. ::: demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
```html ```html
<div> <div>
...@@ -354,9 +355,10 @@ export default { ...@@ -354,9 +355,10 @@ export default {
``` ```
::: :::
### Sizes ### Tamaño
::: demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
```html ```html
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
...@@ -395,11 +397,12 @@ export default { ...@@ -395,11 +397,12 @@ export default {
``` ```
::: :::
### Autocomplete ### Autocompletado
You can get some recommended tips based on the current input. Puede obtener algunas sugerencias basadas en la entrada actual.
::: demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
```html ```html
<el-row class="demo-autocomplete"> <el-row class="demo-autocomplete">
<el-col :span="12"> <el-col :span="12">
...@@ -468,11 +471,12 @@ You can get some recommended tips based on the current input. ...@@ -468,11 +471,12 @@ You can get some recommended tips based on the current input.
``` ```
::: :::
### Custom template ### Template personalizado
Personalice cómo se muestran las sugerencias.
Customize how suggestions are displayed. :::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
...@@ -555,9 +559,9 @@ Customize how suggestions are displayed. ...@@ -555,9 +559,9 @@ Customize how suggestions are displayed.
``` ```
::: :::
### Remote search ### Búsqueda remota
Search data from server-side. Búsqueda de datos desde el servidor.
::: demo ::: demo
```html ```html
...@@ -614,83 +618,83 @@ Search data from server-side. ...@@ -614,83 +618,83 @@ Search data from server-side.
``` ```
::: :::
### Input Attributes ### Input atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----| ----| ----| ---- | ----- | | ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- |
|type| type of input | string | text / textarea | text | | type | tipo de input | string | text / textarea | text |
|value| binding value | string / number| — | — | | value | valor enlazado | string / number | — | — |
|maxlength| maximum Input text length| number| — | — | | maxlength | el maximo para el largo del texto | number | — | — |
|minlength| minimum Input text length| number | — | — | | minlength | el mínimo para el largo del texto | number | — | — |
|placeholder| placeholder of Input| string | — | — | | placeholder | placeholder del Input | string | — | — |
|disabled | whether Input is disabled | boolean | — | false | | disabled | si esta deshabilitado | boolean | — | false |
|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — | | size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
| prefix-icon | prefix icon class | string | — | — | | prefix-icon | clase del icono de prefijo | string | — | — |
| suffix-icon | suffix icon class | string | — | — | | suffix-icon | clase del icono de sufijo | string | — | — |
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | | rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false | | autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|auto-complete | same as `auto-complete` in native input | string | on/off | off | | auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off |
|name | same as `name` in native input | string | — | — | | name | igual que `name` en el input nativo | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false | | readonly | igual que `readonly` en el input nativo | boolean | — | false |
|max | same as `max` in native input | — | — | — | | max | igual que `max` en el input nativo | — | — | — |
|min | same as `min` in native input | — | — | — | | min | igual que `min` en el input nativo | — | — | — |
|step| same as `step` in native input | — | — | — | | step | igual que `step` en el input nativo | — | — | — |
|resize| control the resizability | string | none, both, horizontal, vertical | — | | resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — |
|autofocus | same as `autofocus` in native input | boolean | — | false | | autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
|form | same as `form` in native input | string | — | — | | form | igual que `form` en el input nativo | string | — | — |
| label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Input slots ### Input slots
| Name | Description | | Nombre | Descripción |
|------|--------| | ------- | ------------------------------------ |
| prefix | content as Input prefix | | prefix | contenido como prefijo del input |
| suffix | content as Input suffix | | suffix | contenido como sufijo del input |
| prepend | content to prepend before Input | | prepend | contenido antes del input |
| append | content to append after Input | | append | contenido a añadir después del input |
### Input Events ### Input eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|----| ----| ----| | ------ | ---------------------------------------- | ------------------------- |
| blur | triggers when Input blurs | (event: Event) | | blur | Se dispara cuando se pierde el foco | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | Se dispara cuando se obtiene el foco | (event: Event) |
| change | triggers when the icon inside Input value change | (value: string \| number) | | change | se activa cuando cambia el valor de entrada | (value: string \| number) |
### Autocomplete Attributes ### Autocomplete Atributos
Attribute | Description | Type | Options | Default Atributo | Descripción | Tipo | Opciones | Por defecto
|----| ----| ----| ---- | -----| |----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — | |placeholder| el placeholder del Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false| |disabled | si el Autocompete esta deshabilitado | boolean | — | false|
| valueKey | key name of the input suggestion object for display | string | — | value | | valueKey | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value |
|icon | icon name | string | — | — | |icon | nombre del icono | string | — | — |
|value | binding value | string | — | — | |value | valor enlazado | string | — | — |
| debounce | debounce delay when typing, in milliseconds | number | — | 300 | | debounce | retardo al escribir, en milisegundos | number | — | 300 |
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | |fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
| popper-class | custom class name for autocomplete's dropdown | string | — | — | | popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | | trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
| on-icon-click | hook function when clicking on the input icon | function | — | — | | on-icon-click | funcion que se invoca cuando se hace click en el icono | function | — | — |
| name | same as `name` in native input | string | — | — | | name | igual que `name` en el input nativo | string | — | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | | select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
| label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Autocomplete slots ### Autocomplete slots
| Name | Description | | Nombre | Descripción |
|------|--------| | ------- | ------------------------------------ |
| prefix | content as Input prefix | | prefix | contenido como prefijo del input |
| suffix | content as Input suffix | | suffix | contenido como sufijo del input |
| prepend | content to prepend before Input | | prepend | contenido antes del input |
| append | content to append after Input | | append | contenido a añadir después del input |
### Autocomplete Events ### Autocomplete Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|----| ----| ----| | ------ | ---------------------------------------- | ---------------------------------------- |
|select | triggers when a suggestion is clicked | suggestion being clicked | | select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
### Methods ### Metodo
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
|------|--------|-------| | ------ | ----------------------------- | ---------- |
| focus | focus the Input component | — | | focus | coloca el foco en el elemento | — |
examples/docs/es/select.md
View file @ 11b29e14
...@@ -106,11 +106,11 @@ ...@@ -106,11 +106,11 @@
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"] 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"]
}; };
}, },
mounted() { mounted() {
this.list = this.states.map(item => { return { value: item, label: item }; }); this.list = this.states.map(item => { return { value: item, label: item }; });
}, },
methods: { methods: {
remoteMethod(query) { remoteMethod(query) {
if (query !== '') { if (query !== '') {
...@@ -135,11 +135,11 @@ ...@@ -135,11 +135,11 @@
## Select ## Select
When there are plenty of options, use a drop-down menu to display and select desired ones. Cuando haya muchas opciones, utilice un menú desplegable para mostrar y seleccionar las que desee.
### Basic usage ### Uso básico
:::demo `v-model` is the value of `el-option` that is currently selected. :::demo `v-model` es el valor de `el-option` que está seleccionado actualmente.
```html ```html
<template> <template>
...@@ -181,9 +181,9 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -181,9 +181,9 @@ When there are plenty of options, use a drop-down menu to display and select des
``` ```
::: :::
### Disabled option ### Disabled en el-option
:::demo Set the value of `disabled` in `el-option` to `true` to disable this option. :::demo Establezca el valor de `disabled` en `el-option` como `true` para deshabilitar esta opción.
```html ```html
<template> <template>
...@@ -227,11 +227,12 @@ When there are plenty of options, use a drop-down menu to display and select des ...@@ -227,11 +227,12 @@ When there are plenty of options, use a drop-down menu to display and select des
``` ```
::: :::
### Disabled select ### Disabled en el-select
Desactivar todo el componente.
Disable the whole component. :::demo Configure `disabled` de `el-select` para deshabilitarla.
:::demo Set `disabled` of `el-select` to make it disabled.
```html ```html
<template> <template>
<el-select v-model="value3" disabled placeholder="Select"> <el-select v-model="value3" disabled placeholder="Select">
...@@ -272,11 +273,12 @@ Disable the whole component. ...@@ -272,11 +273,12 @@ Disable the whole component.
``` ```
::: :::
### Clearable single select ### Select simple limpiable
You can clear Select using a clear icon. Puede limpiar un Select con un icono.
:::demo Establezca el atributo `clearable` para `el-select` y aparecerá un icono. Tenga en cuenta que la opción `clearable` es sólo para una selección individual.
:::demo Set `clearable` attribute for `el-select` and a clear icon will appear. Note that `clearable` is only for single select.
```html ```html
<template> <template>
<el-select v-model="value4" clearable placeholder="Select"> <el-select v-model="value4" clearable placeholder="Select">
...@@ -317,11 +319,12 @@ You can clear Select using a clear icon. ...@@ -317,11 +319,12 @@ You can clear Select using a clear icon.
``` ```
::: :::
### Basic multiple select ### Selección múltiple básica
Selección multiple utiliza tags para mostrar las opciones seleccionadas.
Multiple select uses tags to display selected options. :::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.
:::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 ```html
<template> <template>
<el-select v-model="value5" multiple placeholder="Select"> <el-select v-model="value5" multiple placeholder="Select">
...@@ -376,11 +379,11 @@ Multiple select uses tags to display selected options. ...@@ -376,11 +379,11 @@ Multiple select uses tags to display selected options.
``` ```
::: :::
### Custom template ### Personalizar template
You can customize HTML templates for options. Puede personalizar templates HTML para las opciones.
:::demo Insert customized HTML templates into the slot of `el-option`. :::demo Inserte templates HTML personalizados en el slot de `el-option`.
```html ```html
<template> <template>
...@@ -427,11 +430,11 @@ You can customize HTML templates for options. ...@@ -427,11 +430,11 @@ You can customize HTML templates for options.
``` ```
::: :::
### Grouping ### Agrupando
Display options in groups. Mostrar opciones en grupos.
:::demo Use `el-option-group` to group the options, and its `label` attribute stands for the name of the group. :::demo Utilice `el-option-group` para agrupar las opciones, y su atributo `label` representa el nombre del grupo.
```html ```html
<template> <template>
...@@ -487,11 +490,12 @@ Display options in groups. ...@@ -487,11 +490,12 @@ Display options in groups.
``` ```
::: :::
### Option filtering ### Filtrado de opciones
You can filter options for your desired ones. Puede filtrar opciones como lo desee.
:::demo Añadir `filterable` a `el-select` permite filtrar. Por defecto, Select buscará todas las opciones cuyo atributo`label` contenga el valor del input. Si prefiere otras estrategias de filtrado, puede pasar el `filter-method`. `filter-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual.
:::demo Adding `filterable` to `el-select` enables filtering. By default, Select will find all the options whose `label` attribute contains the input value. If you prefer other filtering strategies, you can pass the `filter-method`. `filter-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value.
```html ```html
<template> <template>
<el-select v-model="value8" filterable placeholder="Select"> <el-select v-model="value8" filterable placeholder="Select">
...@@ -532,11 +536,11 @@ You can filter options for your desired ones. ...@@ -532,11 +536,11 @@ You can filter options for your desired ones.
``` ```
::: :::
### Remote Search ### Búsqueda remota
Enter keywords and search data from server. Introduzca palabras y datos para buscar desde el servidor.
:::demo Set the value of `filterable` and `remote` with `true` to enable remote search, and you should pass the `remote-method`. `remote-method` is a `Function` that gets called when the input value changes, and its parameter is the current input value. Note that if `el-option` is rendered with the `v-for` directive, you should add the `key` attribute for `el-option`. Its value needs to be unique, such as `item.value` in the following example. :::demo Configure el valor de `filterable` y `remote` con `true` para habilitar la búsqueda remota, y debería pasar el método `remote-method`. `remote-method` es una función que se llama cuando el valor del input cambia, y su parámetro es el valor del input actual. Tenga en cuenta que si `el-option` se presenta con la directiva `v-for`, debe agregar el atributo `key` para `el-option`. Su valor tiene que ser unívoco, como el valor de `item.value` en el ejemplo siguiente.
```html ```html
<template> <template>
...@@ -611,9 +615,11 @@ Enter keywords and search data from server. ...@@ -611,9 +615,11 @@ Enter keywords and search data from server.
``` ```
::: :::
### Create new items ### Crear nuevos items
Create and select new items that are not included in select options Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.
:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`.
```html ```html
<template> <template>
<el-select <el-select
...@@ -654,58 +660,60 @@ Create and select new items that are not included in select options ...@@ -654,58 +660,60 @@ Create and select new items that are not included in select options
::: :::
:::tip :::tip
If the binding value of Select is an object, make sure to assign `value-key` as its unique identity key name.
Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `value-key` como el nombre único de la clave de identidad.
::: :::
### Select Attributes ### Select atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
| multiple | whether multiple-select is activated | boolean | — | false | | multiple | si multiple-select esta activo | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false | | disabled | si Select esta deshabilitado | boolean | — | false |
| 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 | | 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 | | value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
| name | the name attribute of select input | string | — | — | | size | tamaño del Input | string | large/small/mini | — |
| placeholder | placeholder | string | — | Select | | clearable | si el single select puede ser limpiable | boolean | — | false |
| filterable | whether Select is filterable | boolean | — | false | | multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | | name | el atributo `name` del input seleccionado | string | — | — |
| filter-method | custom filter method | function | — | — | | placeholder | placeholder | string | — | Select |
| remote | whether options are loaded from server | boolean | — | false | | filterable | si Select es filtrable | boolean | — | false |
| remote-method | custom remote search method | function | — | — | | allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
| loading | whether Select is loading data from server | boolean | — | false | | filter-method | metodo de filtrado personalizado | function | — | — |
| loading-text | displayed text while loading data from server | string | — | Loading | | remote | si las opciones se traeran desde el servidor | boolean | — | false |
| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data | | remote-method | metodo de busqueda remota personalizada | function | — | — |
| no-data-text | displayed text when there is no options | string | — | No data | | loading | si Select está cargando datos del servidor | boolean | — | false |
| popper-class | custom class name for Select's dropdown | string | — | — | | loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading |
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false | | no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data |
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false | | no-data-text | texto mostrado cuando no hay opciones | string | — | No data |
| popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — |
### Select Events | reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false |
| Event Name | Description | Parameters | | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
|---------|---------|---------|
| change | triggers when the selected value changes | current selected value | ### Select Eventos
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | | Nombre | Descripción | Parametros |
| remove-tag | triggers when a tag is removed in multiple mode | removed tag value | | -------------- | ---------------------------------------- | ---------------------------------------- |
| clear | triggers when the clear icon is clicked in a clearable Select | — | | change | se dispara cuando el valor del select cambia | valor actual del select |
| blur | triggers when Input blurs | (event: Event) | | visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
| focus | triggers when Input focuses | (event: Event) | | remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
### Option Group Attributes | blur | se dispara cuando el input pierde el foco | (event: Event) |
| Attribute | Description | Type | Accepted Values | Default | | focus | se dispara cuando el input obtiene el foco | (event: Event) |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | name of the group | string | — | — | ### Atributos del grupo de opciones
| disabled | whether to disable all options in this group | boolean | — | false | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
### Option Attributes | label | nombre del grupo | string | — | — |
| Attribute | Description | Type | Accepted Values | Default | | disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value | value of option | string/number/object | — | — | ### Atributos de opciones
| label | label of option, same as `value` if omitted | string/number | — | — | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| disabled | whether option is disabled | boolean | — | false | | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
| value | valor de option | string/number/object | — | — |
### Methods | label | etiqueta de option, es igual a `value` si se omite | string/number | — | — |
| Method | Description | Parameters | | disabled | si option esta deshabilitado | boolean | — | false |
|------|--------|-------|
| focus | focus the Input component | - | ### Metodos
| Metodo | Descripción | Parametros |
| ------ | --------------------------- | ---------- |
| focus | Foco en el componente input | - |
examples/docs/es/slider.md
View file @ 11b29e14
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.demo-box.demo-slider .source { .demo-box.demo-slider .source {
padding: 0; padding: 0;
} }
.demo-box.demo-slider .block { .demo-box.demo-slider .block {
padding: 30px 24px; padding: 30px 24px;
overflow: hidden; overflow: hidden;
...@@ -35,13 +35,13 @@ ...@@ -35,13 +35,13 @@
border-bottom: none; border-bottom: none;
} }
} }
.demo-box.demo-slider .demonstration { .demo-box.demo-slider .demonstration {
font-size: 14px; font-size: 14px;
color: #8492a6; color: #8492a6;
line-height: 44px; line-height: 44px;
} }
.demo-box.demo-slider .demonstration + .el-slider { .demo-box.demo-slider .demonstration + .el-slider {
float: right; float: right;
width: 70%; width: 70%;
...@@ -51,13 +51,13 @@ ...@@ -51,13 +51,13 @@
## Slider ## Slider
Drag the slider within a fixed range. Desliza el slider dentro de un rango fijo.
### Basic usage ### Uso básico
The current value is displayed when the slider is being dragged. El valor actual se muestra cuando se inicia el arrastre del slider.
:::demo Customize the initial value of the slider by setting the binding value. :::demo Personalice el valor inicial del slider configurando el valor vinculado.
```html ```html
<template> <template>
...@@ -104,12 +104,14 @@ The current value is displayed when the slider is being dragged. ...@@ -104,12 +104,14 @@ The current value is displayed when the slider is being dragged.
``` ```
::: :::
### Discrete values ### Valores discretos
The options can be discrete. Las opciones pueden ser discretas.
:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute. :::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.
Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -142,11 +144,11 @@ The options can be discrete. ...@@ -142,11 +144,11 @@ The options can be discrete.
``` ```
::: :::
### Slider with input box ### Slider con input
Set value via a input box. Inserte el valor a traves de un input
:::demo Set the `show-input` attribute to display an input box on the right. :::demo Configure el atributo `show-input` para que muestre un input a la derecha.
```html ```html
<template> <template>
...@@ -170,11 +172,12 @@ Set value via a input box. ...@@ -170,11 +172,12 @@ Set value via a input box.
``` ```
::: :::
### Range selection ### Seleccion de rangos
Se soporta la selección de un rango de valores.
Selecting a range of values is supported. :::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.
:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -199,9 +202,10 @@ Selecting a range of values is supported. ...@@ -199,9 +202,10 @@ Selecting a range of values is supported.
``` ```
::: :::
### Vertical mode ### Modo Vertical
:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` .
:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -225,26 +229,26 @@ Selecting a range of values is supported. ...@@ -225,26 +229,26 @@ Selecting a range of values is supported.
``` ```
::: :::
## Attributes ## Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
| min | minimum value | number | — | 0 | | min | valor minimo | number | — | 0 |
| max | maximum value | number | — | 100 | | max | valor máximo | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false | | disabled | si el Slider esta deshabitado | boolean | — | false |
| step | step size | number | — | 1 | | step | tamaño del paso | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false | | show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true | | show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
| show-stops | whether to display breakpoints | boolean | — | false | | show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true | | show-tooltip | si se muestra el valor en un tooltip | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — | | format-tooltip | formato para mostrar el valor del tooltip | function(value) | — | — |
| range | whether to select a range | boolean | — | false | | range | si se usaran un rango | boolean | — | false |
| vertical | vertical mode | boolean | — | false | | vertical | modo vertical | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — | | height | alto del Slider, requerido en modo vertical | string | — | — |
| label | label for screen reader | string | — | — | | label | etiqueta para screen reader | string | — | — |
|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 | | debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
## Events ## Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | | ------ | ---------------------------------------- | ------------------------ |
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing | | change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
examples/docs/es/steps.md
View file @ 11b29e14
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
active: 0 active: 0
}; };
}, },
methods: { methods: {
next() { next() {
if (this.active++ > 2) this.active = 0; if (this.active++ > 2) this.active = 0;
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
## Steps ## Steps
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.
### Basic usage ### Uso básico
Simple step bar. Barra de pasos simple.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed. :::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
```html ```html
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success">
...@@ -51,11 +51,11 @@ Simple step bar. ...@@ -51,11 +51,11 @@ Simple step bar.
``` ```
::: :::
### Step bar that contains status ### Step bar con el status
Shows the status of the step for each step. Muestra el estado del step para cada paso.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page. :::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
```html ```html
<el-steps :space="200" :active="1" finish-status="success"> <el-steps :space="200" :active="1" finish-status="success">
...@@ -66,9 +66,9 @@ Shows the status of the step for each step. ...@@ -66,9 +66,9 @@ Shows the status of the step for each step.
``` ```
::: :::
### Center ### Centrado
Title and desription can be centered. El título y la descripción pueden estar centrados.
:::demo :::demo
```html ```html
...@@ -81,9 +81,9 @@ Title and desription can be centered. ...@@ -81,9 +81,9 @@ Title and desription can be centered.
``` ```
::: :::
### Step bar with description ### Step bar con descripción
There is description for each step. Puede poner una descripción para cada paso.
:::demo :::demo
```html ```html
...@@ -97,9 +97,9 @@ There is description for each step. ...@@ -97,9 +97,9 @@ There is description for each step.
### Step bar with icon ### Step bar with icon
A variety of custom icons can be used in the step bar. En la barra de pasos se pueden utilizar diversos iconos personalizados.
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`. :::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.
```html ```html
<el-steps :active="1"> <el-steps :active="1">
...@@ -110,11 +110,11 @@ A variety of custom icons can be used in the step bar. ...@@ -110,11 +110,11 @@ A variety of custom icons can be used in the step bar.
``` ```
::: :::
### Vertical step bar ### Step bar vertical
Vertical step bars. Step bar vertical.
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element. :::demo Sólo tiene que fijar el atributo `direction` a ` vertical` en el elemento `el-steps`.
```html ```html
<div style="height: 300px;"> <div style="height: 300px;">
...@@ -127,8 +127,8 @@ Vertical step bars. ...@@ -127,8 +127,8 @@ Vertical step bars.
``` ```
::: :::
### Simple step bar ### Step bar simple
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored. Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.
:::demo :::demo
```html ```html
...@@ -147,30 +147,30 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w ...@@ -147,30 +147,30 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w
``` ```
::: :::
### Steps Attributes ### Steps atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — | | space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal | | direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | current activation step | number | — | 0 | | active | actual paso de activación | number | — | 0 |
| process-status | status of current step | string | wait / process / finish / error / success | process | | process-status | status del paso actual | string | wait / process / finish / error / success | process |
| finish-status | status of end step | string | wait / process / finish / error / success | finish | | finish-status | status del paso final | string | wait / process / finish / error / success | finish |
| align-center | center title and description | boolean | — | false | | align-center | centrado de título y descripción | boolean | — | false |
| simple | whether to apply simple theme | boolean | - | false | | simple | si aplicar un tema simple | boolean | - | false |
### Step Attributes ### Step atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
| title | step title | string | — | — | | title | titulo del paso | string | — | — |
| description | step description | string | — | — | | description | descripción del paso | string | — | — |
| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — | | icon | icono del paso | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - | | status | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | - | |
### Step Slot ### Step Slot
| Name | Description | | Name | Description |
|----|----| | ----------- | -------------------- |
| icon | custom icon | | icon | Icono personalizado |
| title | step title | | title | Titulo del paso |
| description | step description | | description | Descripcion del paso |
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