mirror of https://github.com/ElemeFE/element
Merge pull request #8123 from Gonzalo2310/es-doc
Cascader / dropdown / i18n spanish versionpull/8480/head
杨奕
GitHub
commit
11b29e1421
|
|
@ -280,13 +280,14 @@
|
|||
|
||||
## 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
|
||||
<div class="block">
|
||||
<span class="demonstration">Child options expand when clicked (default)</span>
|
||||
|
|
@ -519,11 +520,12 @@ There are two ways to expand child option items.
|
|||
```
|
||||
:::
|
||||
|
||||
### Disabled option
|
||||
### Opcion Disabled
|
||||
|
||||
Disable an option by setting a `disabled` field in the option object.
|
||||
Para desactivar una opción configure un campo `disabled` en el objeto de opción.
|
||||
|
||||
:::demo En este ejemplo, el primer elemento del array `options` tiene un campo `disabled: true` , por lo que está desactivado. Por defecto, Cascader verifica el campo `disabled` en cada objeto de opción; si está utilizando otro nombre de campo para indicar si una opción está deshabilitada, puede asignarla en el atributo `props` (consulte la tabla API a continuación para obtener más detalles). Y por supuesto, el valor de `value`, `label` y `children` también se pueden personalizar de la misma manera.
|
||||
|
||||
:::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
|
||||
<el-cascader
|
||||
:options="optionsWithDisabled"
|
||||
|
|
@ -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
|
||||
<el-cascader
|
||||
:options="options"
|
||||
|
|
@ -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
|
||||
<el-cascader
|
||||
:options="options"
|
||||
|
|
@ -1168,9 +1171,10 @@ The input can display only the last level instead of all levels.
|
|||
|
||||
### 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
|
||||
<el-cascader
|
||||
:options="options"
|
||||
|
|
@ -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
|
||||
<el-cascader
|
||||
:options="options2"
|
||||
|
|
@ -1433,11 +1438,12 @@ Load child options when their parent option is clicked or hovered over.
|
|||
```
|
||||
:::
|
||||
|
||||
### Filterable
|
||||
### Filtrable
|
||||
|
||||
Search and select options with a keyword.
|
||||
Buscar y seleccionar opciones con una palabra clave.
|
||||
|
||||
:::demo Añadir `filterable` a `el-cascader` permite filtrar
|
||||
|
||||
:::demo Adding `filterable` to `el-cascader` enables filtering
|
||||
```html
|
||||
<div class="block">
|
||||
<span class="demonstration">Only options of the last level can be selected</span>
|
||||
|
|
@ -1663,34 +1669,35 @@ Search and select options with a keyword.
|
|||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------------------- |---------|------------- |-------- |
|
||||
| options | data of the options | array | — | — |
|
||||
| props | configuration options, see the following table | object | — | — |
|
||||
| value | selected value | array | — | — |
|
||||
| popper-class | custom class name for Cascader's dropdown | string | — | — |
|
||||
| placeholder | input placeholder | string | — | Select |
|
||||
| disabled | whether Cascader is disabled | boolean | — | false |
|
||||
| clearable | whether selected value can be cleared | boolean | — | false |
|
||||
| expand-trigger | trigger mode of expanding current item | string | click / hover | click |
|
||||
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
|
||||
| filterable | whether the options can be searched | boolean | — | — |
|
||||
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
|
||||
| change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
|
||||
| size | size of 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) | — | — |
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Opciones | Por defecto |
|
||||
| ---------------- | ---------------------------------------- | --------------- | --------------------- | ----------- |
|
||||
| options | datos de las opciones | array | — | — |
|
||||
| props | opciones de configuration, mire la tabla siguiente | object | — | — |
|
||||
| value | valor seleccionado | array | — | — |
|
||||
| popper-class | nombre de clase para el Cascader's dropdown | string | — | — |
|
||||
| placeholder | input placeholder | string | — | Select |
|
||||
| disabled | si Cascader esta disabled | boolean | — | false |
|
||||
| clearable | si se puede borrar el valor seleccionado | boolean | — | false |
|
||||
| expand-trigger | evento del elemento actual para expandirse. | string | click / hover | click |
|
||||
| show-all-levels | si mostrar todos los niveles del valor seleccionado en la entrada | boolean | — | true |
|
||||
| filterable | si se pueden buscar las opciones | boolean | — | — |
|
||||
| debounce | retardo al escribir la palabra clave del filtro, en milisegundos | number | — | 300 |
|
||||
| change-on-select | si se permite seleccionar una opción de cualquier nivel | boolean | — | false |
|
||||
| size | tamaño del input | string | medium / small / mini | — |
|
||||
| before-filter | funcion antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego es rechazada, el filtrado será abortado. | function(value) | — | — |
|
||||
|
||||
### props
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| --------- | ----------------- | ------ | ------ | ------ |
|
||||
| label | specify which key of option object is used as the option's label | string | — | — |
|
||||
| value | specify which key of option object is used as the option's value | string | — | — |
|
||||
| children | specify which key of option object is used as the option's child options | string | — | — |
|
||||
| disabled | specify which key of option object indicates if the option is disabled | string | — | — |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
|
||||
| label | especifica qué clave del elemento de la opción se utiliza como etiqueta | string | — | — |
|
||||
| value | especifica qué clave del elemento de la opción se utiliza como valor | string | — | — |
|
||||
| children | especifica qué clave del elemento de la opción se utiliza como hijo | string | — | — |
|
||||
| disabled | especifica qué clave del elemento de la opción indica si está deshabilitada | string | — | — |
|
||||
|
||||
### Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------------------ | ---------------------------------------- | ------------------------- |
|
||||
| change | se dispara cuando el valor cambia | valor |
|
||||
| active-item-change | se dispara cuando cambia la opción activa, sólo funciona cuando `change-on-select` es `false`. | array de opciones activas |
|
||||
|
||||
### 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 |
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
.demo-box {
|
||||
.el-dropdown {
|
||||
vertical-align: top;
|
||||
|
||||
|
||||
& + .el-dropdown {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
padding: 30px 0;
|
||||
text-align: center;
|
||||
border-right: 1px solid #eff2f6;
|
||||
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -51,12 +51,12 @@
|
|||
}
|
||||
</script>
|
||||
## Dropdown
|
||||
Toggleable menu for displaying lists of links and actions.
|
||||
Menú conmutable para visualizar listas de enlaces y acciones.
|
||||
|
||||
### Basic usage
|
||||
Hover on the dropdown menu to unfold it for more actions.
|
||||
### Uso básico
|
||||
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
|
||||
<el-dropdown>
|
||||
|
|
@ -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
|
||||
<el-dropdown>
|
||||
<el-button type="primary">
|
||||
|
|
@ -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
|
||||
<el-row class="block-col-2">
|
||||
|
|
@ -197,11 +198,12 @@ Click the triggering element or hover on it.
|
|||
```
|
||||
:::
|
||||
|
||||
### Menu hiding behavior
|
||||
### Ocultamiento del menú
|
||||
|
||||
Use `hide-on-click` to define if menu closes on clicking.
|
||||
Use `hide-on-click` para definir si el menú se cierra al hacer clic.
|
||||
|
||||
:::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.
|
||||
|
||||
:::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
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
|
|
@ -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
|
||||
```html
|
||||
|
|
@ -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
|
||||
<el-dropdown split-button type="primary">
|
||||
|
|
@ -319,28 +321,28 @@ Besides default size, Dropdown component provides three additional sizes for you
|
|||
:::
|
||||
|
||||
|
||||
### Dropdown Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
|
||||
| size | menu size, also works on the split button | string | medium / small / mini | — |
|
||||
| split-button | whether a button group is displayed | boolean | — | false |
|
||||
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | how to trigger | string | hover/click | hover |
|
||||
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
|
||||
| show-timeout | Delay time before show a dropdown | number | — | 250 |
|
||||
| hide-timeout | Delay time before hide a dropdown | number | — | 150 |
|
||||
### Dropdown atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
|
||||
| type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — |
|
||||
| size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — |
|
||||
| split-button | si se visualiza un grupo de botones | boolean | — | false |
|
||||
| placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
|
||||
| trigger | cómo detonar | string | hover/click | hover |
|
||||
| hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true |
|
||||
| show-timeout | Tiempo de retardo antes de mostrar un dropdown | number | — | 250 |
|
||||
| hide-timeout | Tiempo de retardo antes de ocultar un dropdown | number | — | 150 |
|
||||
|
||||
### Dropdown Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| click | if `split-button` is `true`, triggers when left button is clicked | — |
|
||||
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
### Dropdown Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| click | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | — |
|
||||
| command | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
|
||||
| visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
|
||||
|
||||
### Dropdown Menu Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|------------- |---------------- |---------------- |---------------------- |-------- |
|
||||
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — |
|
||||
| disabled | whether the item is disabled | boolean | — | false |
|
||||
| divided | whether a divider is displayed | boolean | — | false |
|
||||
### Dropdown Menu Item Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
|
||||
| command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
|
||||
| disabled | si el elemento está desactivado | boolean | — | false |
|
||||
| divided | si se visualiza un divisor | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -176,17 +176,17 @@
|
|||
.el-form {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
|
||||
.line {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.el-checkbox-group {
|
||||
width: 320px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
&:after, &:before {
|
||||
content: ' ';
|
||||
display: table;
|
||||
|
|
@ -197,14 +197,14 @@
|
|||
font-size: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
||||
.el-checkbox {
|
||||
float: left;
|
||||
width: 160px;
|
||||
padding-right: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
+ .el-checkbox {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
|
@ -215,7 +215,7 @@
|
|||
}
|
||||
.demo-form-inline {
|
||||
width: auto;
|
||||
|
||||
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
}
|
||||
.demo-ruleForm {
|
||||
width: 480px;
|
||||
|
||||
|
||||
.el-select .el-input {
|
||||
width: 360px;
|
||||
}
|
||||
|
|
@ -245,13 +245,13 @@
|
|||
|
||||
## 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
|
||||
<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
|
|||
:::
|
||||
|
||||
:::tip
|
||||
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
|
||||
> <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>
|
||||
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
|
||||
> <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
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
### 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.
|
||||
|
||||
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
|
||||
<el-radio-group v-model="labelPosition" size="small">
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
### 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
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
### Custom validation rules
|
||||
### Reglas personalizadas de validación
|
||||
|
||||
This example shows how to customize your own validation rules to finish a two-factor password verification.
|
||||
Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos.
|
||||
|
||||
:::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono.
|
||||
|
||||
:::demo Here we use `status-icon` to reflect validation result as an icon.
|
||||
```html
|
||||
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
### 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
|
||||
<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
|
|||
```
|
||||
:::
|
||||
|
||||
### 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
|
||||
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
|
||||
<el-form-item
|
||||
|
|
@ -754,14 +758,17 @@ This example shows how to customize your own validation rules to finish a two-fa
|
|||
:::
|
||||
|
||||
:::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
|
||||
|
||||
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
|
||||
Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
|
||||
|
||||
::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
|
||||
|
||||
::: 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
|
||||
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
|
||||
<el-form-item label="Activity name">
|
||||
|
|
@ -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 |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| model| data of form component | object | — | — |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| inline | whether the form is inline | boolean | — | false |
|
||||
| label-position | position of label | string | left / right / top | right |
|
||||
| label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
|
||||
| label-suffix | suffix of the label | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | whether to display the error message inline with the form item | boolean | — | false |
|
||||
| status-icon | whether to display an icon indicating the validation result | boolean | — | false |
|
||||
| size | control the size of components in this form | string | medium / small / mini | - |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | --------------------- | ----------- |
|
||||
| model | Datos del componente | object | — | — |
|
||||
| rules | Reglas de validación | object | — | — |
|
||||
| inline | Si el form es inline | boolean | — | false |
|
||||
| label-position | Posicion de la etiqueta | string | left / right / top | right |
|
||||
| label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — |
|
||||
| label-suffix | sufijo de la etiqueta | string | — | — |
|
||||
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
|
||||
| inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false |
|
||||
| status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false |
|
||||
| size | el tamaño de los componentes en este form | string | medium / small / mini | - |
|
||||
|
||||
### Form Methods
|
||||
### Form Metodos
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
|
||||
| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | reset all the fields and remove validation result | — |
|
||||
| clearValidate | clear validation message for all fields | -
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| validate | el método para validar todo el formulario. Devuelve una promesa si se omite el return | Function(callback: Function(boolean)) |
|
||||
| validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) |
|
||||
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
|
||||
| clearValidate | limpia mensaje de validación para todos los campos | -
|
||||
|
||||
### Form-Item Attributes
|
||||
### Form-Item Atributos
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ---- | ----| ---- | ---- | ---- |
|
||||
| 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` |
|
||||
| label | label | string | — | — |
|
||||
| label-width | width of label, e.g. '50px' | string | — | — |
|
||||
| required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false |
|
||||
| rules | validation rules of form | object | — | — |
|
||||
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
|
||||
| show-message | whether to show the error message | boolean | — | true |
|
||||
| inline-message | inline style validate message | boolean | — | false |
|
||||
| size | control the size of components in this form-item | string | medium / small / mini | - |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | ------- | ----------------------------------- | ----------- |
|
||||
| prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | |
|
||||
| label | etiqueta | string | — | — |
|
||||
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
|
||||
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | string | — | false |
|
||||
| rules | reglas de validacion del form | object | — | — |
|
||||
| error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — |
|
||||
| show-message | si mostrar o no el mensaje de error | boolean | — | true |
|
||||
| inline-message | mensaje de validación estilo inline | boolean | — | false |
|
||||
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
|
||||
|
||||
### Form-Item Slot
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| — | content of Form Item |
|
||||
| label | content of label |
|
||||
| Nombre | Descripción |
|
||||
| ------ | ------------------------ |
|
||||
| — | contenido del Form Item |
|
||||
| label | contenido de la etiqueta |
|
||||
|
||||
### Form-Item Methods
|
||||
### Form-Item Metodo
|
||||
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| resetField | reset current field and remove validation result | — |
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ---------- | ---------------------------------------- | ---------- |
|
||||
| resetField | restablecer campo actual y eliminar resultado de validación | — |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
## 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
|
||||
import Vue from 'vue'
|
||||
|
|
@ -10,7 +10,7 @@ import locale from 'element-ui/lib/locale/lang/en'
|
|||
Vue.use(ElementUI, { locale })
|
||||
```
|
||||
|
||||
Or if you are importing Element on demand:
|
||||
O si está importando Element a petición:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
|
|
@ -26,7 +26,7 @@ Vue.component(Button.name, Button)
|
|||
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
|
||||
```javascript
|
||||
|
|
@ -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
|
||||
import Vue from 'vue'
|
||||
|
|
@ -56,8 +56,8 @@ Vue.locale('zh-cn', zhLocale)
|
|||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## Compatible with other i18n plugins
|
||||
Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.
|
||||
## Compatible con otros plugins i18n
|
||||
Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
|
|
@ -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
|
||||
import Vue from 'vue'
|
||||
|
|
@ -108,7 +108,7 @@ Vue.use(Element, {
|
|||
new Vue({ i18n }).$mount('#app')
|
||||
```
|
||||
|
||||
## Custom i18n in on-demand components
|
||||
## Personalización de i18n en componentes bajo petición
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
|
|
@ -141,7 +141,7 @@ const i18n = new VueI18n({
|
|||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
```
|
||||
|
||||
## Import via CDN
|
||||
## Importar via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
|
|
@ -153,7 +153,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
|||
</script>
|
||||
```
|
||||
|
||||
Compatible with `vue-i18n`
|
||||
Compatible con `vue-i18n`
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
|
|
@ -168,7 +168,7 @@ Compatible with `vue-i18n`
|
|||
</script>
|
||||
```
|
||||
|
||||
Currently Element ships with the following languages:
|
||||
Actualmente Element está disponible en los siguientes idiomas:
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-CN)</li>
|
||||
<li>English (en)</li>
|
||||
|
|
@ -209,4 +209,4 @@ Currently Element ships with the following languages:
|
|||
<li>Hebrew (he)</li>
|
||||
</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.
|
||||
|
|
@ -67,11 +67,11 @@
|
|||
|
||||
## 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
|
||||
|
||||
|
|
@ -84,7 +84,7 @@ Just assign the class name to `el-icon-iconName`.
|
|||
```
|
||||
:::
|
||||
|
||||
### Icons
|
||||
### Iconos
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in icons" :key="name">
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
|
||||
## 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
|
||||
<template>
|
||||
|
|
@ -59,7 +59,7 @@ Input numerical values with a customizable range.
|
|||
|
||||
### 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
|
||||
<template>
|
||||
|
|
@ -79,9 +79,9 @@ Input numerical values with a customizable range.
|
|||
|
||||
### 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
|
||||
<template>
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
<template>
|
||||
<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`.
|
|||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
### Atributos
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|----| ----| ---| ----| -----|
|
||||
|value | binding value| number | — | — |
|
||||
|min | the minimum allowed value | number | — | 0 |
|
||||
|max | the maximum allowed value | number | — | `Infinity` |
|
||||
|step | incremental step | number | — | 1 |
|
||||
|size | size of the component | string | large/small| — |
|
||||
|disabled| whether the component is disabled | boolean | — | false |
|
||||
|controls| whether to enable the control buttons | boolean | — | true |
|
||||
|debounce| debounce delay when typing, in milliseconds | number | — | 300 |
|
||||
|controls-position | position of the control buttons | string | right | - |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
|label | label text | string | — | — |
|
||||
### Events
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ------- | --------------- | ---------- |
|
||||
| value | valor vinculado | number | — | — |
|
||||
| min | el valor mínimo permitido | number | — | 0 |
|
||||
| max | el valor maximo permitido | number | — | `Infinity` |
|
||||
| step | incremento (salto) | number | — | 1 |
|
||||
| size | tamaño del componente | string | large/small | — |
|
||||
| disabled | si el componente esta deshabilitado | boolean | — | false |
|
||||
| controls | si se activan los botones de control | boolean | — | true |
|
||||
| debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 |
|
||||
| controls-position | posición de los botones de control | string | right | - |
|
||||
| name | lo mismo que `name` en un input nativo | string | — | — |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
### Eventos
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ---- | -----|
|
||||
|change | triggers when the value changes | value after change |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
| Nombre | Descripción | Parámetros |
|
||||
| ---------- | ------------------------------- | ------------------ |
|
||||
| change | se produce cuando el valor cambia | value after change |
|
||||
| blur | se produce cuando el componente pierde el foco | (event: Event) |
|
||||
| focus | se produce cuando el componente obtiene el foco | (event: Event) |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
### Métodos
|
||||
| Método | Descripción | Parámetro |
|
||||
| ------ | ------------------------- | ---------- |
|
||||
| focus | coloca el foco en el elemento actual | - |
|
||||
|
|
|
|||
|
|
@ -41,13 +41,13 @@
|
|||
querySearch(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
|
||||
|
||||
cb(results);
|
||||
},
|
||||
querySearchAsync(queryString, cb) {
|
||||
var links = this.links;
|
||||
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
|
||||
|
||||
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results);
|
||||
|
|
@ -106,17 +106,17 @@
|
|||
}
|
||||
.demo-autocomplete {
|
||||
text-align: center;
|
||||
|
||||
|
||||
.sub-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
|
||||
.el-col:not(:last-child) {
|
||||
border-right: 1px solid rgba(224,230,237,0.50);
|
||||
}
|
||||
|
||||
|
||||
.el-autocomplete {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
li {
|
||||
line-height: normal;
|
||||
padding: 7px *;
|
||||
|
||||
|
||||
.name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -144,9 +144,9 @@
|
|||
|
||||
## Input
|
||||
|
||||
Input data using mouse or keyboard.
|
||||
Ingresa datos usando el ratón o teclado.
|
||||
|
||||
### Basic usage
|
||||
### Uso básico
|
||||
|
||||
::: demo
|
||||
|
||||
|
|
@ -167,7 +167,7 @@ export default {
|
|||
|
||||
### Disabled
|
||||
|
||||
::: demo Disable the Input with the `disabled` attribute.
|
||||
::: demo Deshabilite el Input con el atributo `disabled`.
|
||||
|
||||
```html
|
||||
<el-input
|
||||
|
|
@ -188,11 +188,12 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### Input with icon
|
||||
### Input con icono
|
||||
|
||||
Add an icon to indicate input type.
|
||||
Añada un icono para indicar el tipo de Input.
|
||||
|
||||
::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
|
||||
|
||||
::: 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
|
||||
<div class="demo-input-suffix">
|
||||
<span class="demo-input-label">Using attributes</span>
|
||||
|
|
@ -245,9 +246,9 @@ export default {
|
|||
|
||||
### 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
|
||||
<el-input
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
<div>
|
||||
|
|
@ -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
|
||||
<div class="demo-input-size">
|
||||
<el-input
|
||||
|
|
@ -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
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
|
|
@ -468,11 +471,12 @@ You can get some recommended tips based on the current input.
|
|||
```
|
||||
:::
|
||||
|
||||
### Custom template
|
||||
### Template personalizado
|
||||
|
||||
Customize how suggestions are displayed.
|
||||
Personalice cómo se muestran las sugerencias.
|
||||
|
||||
:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
|
||||
|
||||
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
|
||||
```html
|
||||
<el-autocomplete
|
||||
popper-class="my-autocomplete"
|
||||
|
|
@ -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
|
||||
```html
|
||||
|
|
@ -614,83 +618,83 @@ Search data from server-side.
|
|||
```
|
||||
:::
|
||||
|
||||
### Input Attributes
|
||||
### Input atributos
|
||||
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
| ----| ----| ----| ---- | ----- |
|
||||
|type| type of input | string | text / textarea | text |
|
||||
|value| binding value | string / number| — | — |
|
||||
|maxlength| maximum Input text length| number| — | — |
|
||||
|minlength| minimum Input text length| number | — | — |
|
||||
|placeholder| placeholder of Input| string | — | — |
|
||||
|disabled | whether Input is disabled | boolean | — | false |
|
||||
|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
|
||||
| prefix-icon | prefix icon class | string | — | — |
|
||||
| suffix-icon | suffix icon class | string | — | — |
|
||||
|rows | number of rows of textarea, only works when `type` is '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 |
|
||||
|auto-complete | same as `auto-complete` in native input | string | on/off | off |
|
||||
|name | same as `name` in native input | string | — | — |
|
||||
| readonly | same as `readonly` in native input | boolean | — | false |
|
||||
|max | same as `max` in native input | — | — | — |
|
||||
|min | same as `min` in native input | — | — | — |
|
||||
|step| same as `step` in native input | — | — | — |
|
||||
|resize| control the resizability | string | none, both, horizontal, vertical | — |
|
||||
|autofocus | same as `autofocus` in native input | boolean | — | false |
|
||||
|form | same as `form` in native input | string | — | — |
|
||||
| label | label text | string | — | — |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- |
|
||||
| type | tipo de input | string | text / textarea | text |
|
||||
| value | valor enlazado | string / number | — | — |
|
||||
| maxlength | el maximo para el largo del texto | number | — | — |
|
||||
| minlength | el mínimo para el largo del texto | number | — | — |
|
||||
| placeholder | placeholder del Input | string | — | — |
|
||||
| disabled | si esta deshabilitado | boolean | — | false |
|
||||
| size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
|
||||
| prefix-icon | clase del icono de prefijo | string | — | — |
|
||||
| suffix-icon | clase del icono de sufijo | string | — | — |
|
||||
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
|
||||
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|
||||
| auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off |
|
||||
| name | igual que `name` en el input nativo | string | — | — |
|
||||
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
|
||||
| max | igual que `max` en el input nativo | — | — | — |
|
||||
| min | igual que `min` en el input nativo | — | — | — |
|
||||
| step | igual que `step` en el input nativo | — | — | — |
|
||||
| resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — |
|
||||
| autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
|
||||
| form | igual que `form` en el input nativo | string | — | — |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
|
||||
### Input slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | content as Input prefix |
|
||||
| suffix | content as Input suffix |
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
| Nombre | Descripción |
|
||||
| ------- | ------------------------------------ |
|
||||
| prefix | contenido como prefijo del input |
|
||||
| suffix | contenido como sufijo del input |
|
||||
| prepend | contenido antes del input |
|
||||
| append | contenido a añadir después del input |
|
||||
|
||||
### Input Events
|
||||
### Input eventos
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
| change | triggers when the icon inside Input value change | (value: string \| number) |
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ------------------------- |
|
||||
| blur | Se dispara cuando se pierde el foco | (event: Event) |
|
||||
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
|
||||
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
|
||||
|
||||
### Autocomplete Attributes
|
||||
### Autocomplete Atributos
|
||||
|
||||
Attribute | Description | Type | Options | Default
|
||||
Atributo | Descripción | Tipo | Opciones | Por defecto
|
||||
|----| ----| ----| ---- | -----|
|
||||
|placeholder| the placeholder of Autocomplete| string | — | — |
|
||||
|disabled | whether Autocomplete is disabled | boolean | — | false|
|
||||
| valueKey | key name of the input suggestion object for display | string | — | value |
|
||||
|icon | icon name | string | — | — |
|
||||
|value | binding value | string | — | — |
|
||||
| debounce | debounce delay when typing, in milliseconds | 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) | — | — |
|
||||
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
||||
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
|
||||
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
|
||||
| label | label text | string | — | — |
|
||||
|placeholder| el placeholder del Autocomplete| string | — | — |
|
||||
|disabled | si el Autocompete esta deshabilitado | boolean | — | false|
|
||||
| valueKey | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value |
|
||||
|icon | nombre del icono | string | — | — |
|
||||
|value | valor enlazado | string | — | — |
|
||||
| debounce | retardo al escribir, en milisegundos | number | — | 300 |
|
||||
|fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
|
||||
| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
|
||||
| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
|
||||
| on-icon-click | funcion que se invoca cuando se hace click en el icono | function | — | — |
|
||||
| name | igual que `name` en el input nativo | string | — | — |
|
||||
| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
|
||||
| label | texto de la etiqueta | string | — | — |
|
||||
|
||||
### Autocomplete slots
|
||||
|
||||
| Name | Description |
|
||||
|------|--------|
|
||||
| prefix | content as Input prefix |
|
||||
| suffix | content as Input suffix |
|
||||
| prepend | content to prepend before Input |
|
||||
| append | content to append after Input |
|
||||
| Nombre | Descripción |
|
||||
| ------- | ------------------------------------ |
|
||||
| prefix | contenido como prefijo del input |
|
||||
| suffix | contenido como sufijo del input |
|
||||
| prepend | contenido antes del input |
|
||||
| append | contenido a añadir después del input |
|
||||
|
||||
### Autocomplete Events
|
||||
### Autocomplete Eventos
|
||||
|
||||
| Event Name | Description | Parameters |
|
||||
|----| ----| ----|
|
||||
|select | triggers when a suggestion is clicked | suggestion being clicked |
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ---------------------------------------- |
|
||||
| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | — |
|
||||
### Metodo
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------ | ----------------------------- | ---------- |
|
||||
| focus | coloca el foco en el elemento | — |
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
this.list = this.states.map(item => { return { value: item, label: item }; });
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
remoteMethod(query) {
|
||||
if (query !== '') {
|
||||
|
|
@ -135,11 +135,11 @@
|
|||
|
||||
## 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
|
||||
<template>
|
||||
|
|
@ -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
|
||||
<template>
|
||||
|
|
@ -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
|
||||
|
||||
Disable the whole component.
|
||||
Desactivar todo el componente.
|
||||
|
||||
:::demo Configure `disabled` de `el-select` para deshabilitarla.
|
||||
|
||||
:::demo Set `disabled` of `el-select` to make it disabled.
|
||||
```html
|
||||
<template>
|
||||
<el-select v-model="value3" disabled placeholder="Select">
|
||||
|
|
@ -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
|
||||
<template>
|
||||
<el-select v-model="value4" clearable placeholder="Select">
|
||||
|
|
@ -317,11 +319,12 @@ You can clear Select using a clear icon.
|
|||
```
|
||||
:::
|
||||
|
||||
### Basic multiple select
|
||||
### Selección múltiple básica
|
||||
|
||||
Multiple select uses tags to display selected options.
|
||||
Selección multiple utiliza tags para mostrar las opciones seleccionadas.
|
||||
|
||||
:::demo Configure el atributo `multiple` para `el-select` para habilitar el modo múltiple. En este caso, el valor del `v-model` será un array de opciones seleccionadas. 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
|
||||
<template>
|
||||
<el-select v-model="value5" multiple placeholder="Select">
|
||||
|
|
@ -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
|
||||
<template>
|
||||
|
|
@ -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
|
||||
<template>
|
||||
|
|
@ -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
|
||||
<template>
|
||||
<el-select v-model="value8" filterable placeholder="Select">
|
||||
|
|
@ -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
|
||||
<template>
|
||||
|
|
@ -611,9 +615,11 @@ Enter keywords and search data from server.
|
|||
```
|
||||
:::
|
||||
|
||||
### Create new items
|
||||
Create and select new items that are not included in select options
|
||||
:::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`.
|
||||
### Crear nuevos items
|
||||
Crear y seleccionar nuevos items que no están incluidas en las opciones de selección.
|
||||
|
||||
:::demo Al utilizar el atributo `allow-create`, los usuarios pueden crear nuevos elementos escribiendo en el cuadro del input. Tenga en cuenta que para que `allow-create` funcione, `filterable` debe ser `true`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-select
|
||||
|
|
@ -654,58 +660,60 @@ Create and select new items that are not included in select options
|
|||
:::
|
||||
|
||||
:::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
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| multiple | whether multiple-select is activated | boolean | — | false |
|
||||
| disabled | whether Select is disabled | 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 |
|
||||
### Select atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------------- | ---------------------------------------- | -------- | ----------------- | ---------------- |
|
||||
| multiple | si multiple-select esta activo | boolean | — | false |
|
||||
| disabled | si Select esta deshabilitado | boolean | — | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | — | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | — | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| loading | whether Select is loading data from server | boolean | — | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
|
||||
| no-data-text | displayed text when there is no options | string | — | No data |
|
||||
| popper-class | custom class name for Select's dropdown | string | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
|
||||
| value-key | nombre de clave de identidad única para el valor, necesario cuando el valor es un objeto. | string | — | value |
|
||||
| size | tamaño del Input | string | large/small/mini | — |
|
||||
| clearable | si el single select puede ser limpiable | boolean | — | false |
|
||||
| multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 |
|
||||
| name | el atributo `name` del input seleccionado | string | — | — |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | si Select es filtrable | boolean | — | false |
|
||||
| allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false |
|
||||
| filter-method | metodo de filtrado personalizado | function | — | — |
|
||||
| remote | si las opciones se traeran desde el servidor | boolean | — | false |
|
||||
| remote-method | metodo de busqueda remota personalizada | function | — | — |
|
||||
| loading | si Select está cargando datos del servidor | boolean | — | false |
|
||||
| loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading |
|
||||
| no-match-text | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string | — | No matching data |
|
||||
| no-data-text | texto mostrado cuando no hay opciones | string | — | No data |
|
||||
| popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — |
|
||||
| reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false |
|
||||
| default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false |
|
||||
|
||||
### Select Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------|---------|---------|
|
||||
| change | triggers when the selected value changes | current selected value |
|
||||
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
|
||||
| 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 | — |
|
||||
| blur | triggers when Input blurs | (event: Event) |
|
||||
| focus | triggers when Input focuses | (event: Event) |
|
||||
### Select Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| -------------- | ---------------------------------------- | ---------------------------------------- |
|
||||
| change | se dispara cuando el valor del select cambia | valor actual del select |
|
||||
| visible-change | se dispara cuando el menu desplegable aparece o desaparece | true cuando aparece, y false en otro caso |
|
||||
| remove-tag | se dispara cuando un tag es removido en modo multiple | el valor del tag removido |
|
||||
| clear | se dispara cuando el icono se clickea en un Select limpiable | — |
|
||||
| blur | se dispara cuando el input pierde el foco | (event: Event) |
|
||||
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
|
||||
|
||||
### Option Group Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| label | name of the group | string | — | — |
|
||||
| disabled | whether to disable all options in this group | boolean | — | false |
|
||||
### Atributos del grupo de opciones
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||
| label | nombre del grupo | string | — | — |
|
||||
| disabled | si se deshabilitan todas las opciones del grupo | boolean | — | false |
|
||||
|
||||
### Option Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| value | value of option | string/number/object | — | — |
|
||||
| label | label of option, same as `value` if omitted | string/number | — | — |
|
||||
| disabled | whether option is disabled | boolean | — | false |
|
||||
### Atributos de opciones
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
|
||||
| value | valor de option | string/number/object | — | — |
|
||||
| label | etiqueta de option, es igual a `value` si se omite | string/number | — | — |
|
||||
| disabled | si option esta deshabilitado | boolean | — | false |
|
||||
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| focus | focus the Input component | - |
|
||||
### Metodos
|
||||
| Metodo | Descripción | Parametros |
|
||||
| ------ | --------------------------- | ---------- |
|
||||
| focus | Foco en el componente input | - |
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
.demo-box.demo-slider .source {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.demo-box.demo-slider .block {
|
||||
padding: 30px 24px;
|
||||
overflow: hidden;
|
||||
|
|
@ -35,13 +35,13 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.demo-box.demo-slider .demonstration {
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
|
||||
.demo-box.demo-slider .demonstration + .el-slider {
|
||||
float: right;
|
||||
width: 70%;
|
||||
|
|
@ -51,13 +51,13 @@
|
|||
|
||||
## 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
|
||||
<template>
|
||||
|
|
@ -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.
|
||||
|
||||
Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
|
|
@ -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
|
||||
<template>
|
||||
|
|
@ -170,11 +172,12 @@ Set value via a input box.
|
|||
```
|
||||
:::
|
||||
|
||||
### Range selection
|
||||
### Seleccion de rangos
|
||||
|
||||
Selecting a range of values is supported.
|
||||
Se soporta la selección de un rango de valores.
|
||||
|
||||
:::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.
|
||||
|
||||
:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
|
||||
```html
|
||||
<template>
|
||||
<div class="block">
|
||||
|
|
@ -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
|
||||
<template>
|
||||
<div class="block">
|
||||
|
|
@ -225,26 +229,26 @@ Selecting a range of values is supported.
|
|||
```
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| min | minimum value | number | — | 0 |
|
||||
| max | maximum value | number | — | 100 |
|
||||
| disabled | whether Slider is disabled | boolean | — | false |
|
||||
| step | step size | number | — | 1 |
|
||||
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
|
||||
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
|
||||
| show-stops | whether to display breakpoints | boolean | — | false |
|
||||
| show-tooltip | whether to display tooltip value | boolean | — | true |
|
||||
| format-tooltip | format to display tooltip value | function(value) | — | — |
|
||||
| range | whether to select a range | boolean | — | false |
|
||||
| vertical | vertical mode | boolean | — | false |
|
||||
| height | Slider height, required in vertical mode | string | — | — |
|
||||
| label | label for screen reader | string | — | — |
|
||||
|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
|
||||
## Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
|
||||
| min | valor minimo | number | — | 0 |
|
||||
| max | valor máximo | number | — | 100 |
|
||||
| disabled | si el Slider esta deshabitado | boolean | — | false |
|
||||
| step | tamaño del paso | number | — | 1 |
|
||||
| show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
|
||||
| show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
|
||||
| show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
|
||||
| show-tooltip | si se muestra el valor en un tooltip | boolean | — | true |
|
||||
| format-tooltip | formato para mostrar el valor del tooltip | function(value) | — | — |
|
||||
| range | si se usaran un rango | boolean | — | false |
|
||||
| vertical | modo vertical | boolean | — | false |
|
||||
| height | alto del Slider, requerido en modo vertical | string | — | — |
|
||||
| label | etiqueta para screen reader | string | — | — |
|
||||
| debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
|
||||
|
||||
## Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
|
||||
## Eventos
|
||||
| Nombre | Descripción | Parametros |
|
||||
| ------ | ---------------------------------------- | ------------------------ |
|
||||
| change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
next() {
|
||||
if (this.active++ > 2) this.active = 0;
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
|
||||
## 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
|
||||
<el-steps :active="active" finish-status="success">
|
||||
|
|
@ -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
|
||||
<el-steps :space="200" :active="1" finish-status="success">
|
||||
|
|
@ -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
|
||||
```html
|
||||
|
|
@ -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
|
||||
```html
|
||||
|
|
@ -97,9 +97,9 @@ There is description for each step.
|
|||
|
||||
### 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
|
||||
<el-steps :active="1">
|
||||
|
|
@ -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
|
||||
<div style="height: 300px;">
|
||||
|
|
@ -127,8 +127,8 @@ Vertical step bars.
|
|||
```
|
||||
:::
|
||||
|
||||
### Simple step bar
|
||||
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
|
||||
### Step bar simple
|
||||
Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
@ -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 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
|
||||
| direction | display direction | string | vertical/horizontal | horizontal |
|
||||
| active | current activation step | number | — | 0 |
|
||||
| process-status | status of current step | string | wait / process / finish / error / success | process |
|
||||
| finish-status | status of end step | string | wait / process / finish / error / success | finish |
|
||||
| align-center | center title and description | boolean | — | false |
|
||||
| simple | whether to apply simple theme | boolean | - | false |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
|
||||
| space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
|
||||
| direction | dirección de visualización | string | vertical/horizontal | horizontal |
|
||||
| active | actual paso de activación | number | — | 0 |
|
||||
| process-status | status del paso actual | string | wait / process / finish / error / success | process |
|
||||
| finish-status | status del paso final | string | wait / process / finish / error / success | finish |
|
||||
| align-center | centrado de título y descripción | boolean | — | false |
|
||||
| simple | si aplicar un tema simple | boolean | - | false |
|
||||
|
||||
### Step Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| title | step title | string | — | — |
|
||||
| description | step description | string | — | — |
|
||||
| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
|
||||
| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
|
||||
### Step atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| title | titulo del paso | string | — | — |
|
||||
| description | descripción del paso | string | — | — |
|
||||
| icon | icono del paso | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string | — |
|
||||
| status | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | - | |
|
||||
|
||||
### Step Slot
|
||||
| Name | Description |
|
||||
|----|----|
|
||||
| icon | custom icon |
|
||||
| title | step title |
|
||||
| description | step description |
|
||||
| Name | Description |
|
||||
| ----------- | -------------------- |
|
||||
| icon | Icono personalizado |
|
||||
| title | Titulo del paso |
|
||||
| description | Descripcion del paso |
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue