Skip to content

E
Element
Commit a1a97da0 authored by Gonzalo2310's avatar Gonzalo2310
Browse files
Options

input.md spanish version

parent 1b4b472d
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 95 deletions
examples/docs/es/input.md
View file @ a1a97da0
...@@ -41,13 +41,13 @@ ...@@ -41,13 +41,13 @@
querySearch(queryString, cb) { querySearch(queryString, cb) {
var links = this.links; var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links; var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
cb(results); cb(results);
}, },
querySearchAsync(queryString, cb) { querySearchAsync(queryString, cb) {
var links = this.links; var links = this.links;
var results = queryString ? links.filter(this.createStateFilter(queryString)) : links; var results = queryString ? links.filter(this.createStateFilter(queryString)) : links;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
cb(results); cb(results);
...@@ -106,17 +106,17 @@ ...@@ -106,17 +106,17 @@
} }
.demo-autocomplete { .demo-autocomplete {
text-align: center; text-align: center;
.sub-title { .sub-title {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
color: #8492a6; color: #8492a6;
} }
.el-col:not(:last-child) { .el-col:not(:last-child) {
border-right: 1px solid rgba(224,230,237,0.50); border-right: 1px solid rgba(224,230,237,0.50);
} }
.el-autocomplete { .el-autocomplete {
text-align: left; text-align: left;
} }
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
li { li {
line-height: normal; line-height: normal;
padding: 7px *; padding: 7px *;
.name { .name {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
...@@ -144,9 +144,9 @@ ...@@ -144,9 +144,9 @@
## Input ## Input
Input data using mouse or keyboard. Ingresa datos usando el ratón o teclado.
### Basic usage ### Uso básico
::: demo ::: demo
...@@ -167,7 +167,7 @@ export default { ...@@ -167,7 +167,7 @@ export default {
### Disabled ### Disabled
::: demo Disable the Input with the `disabled` attribute. ::: demo Deshabilite el Input con el atributo `disabled`.
```html ```html
<el-input <el-input
...@@ -188,11 +188,12 @@ export default { ...@@ -188,11 +188,12 @@ export default {
``` ```
::: :::
### Input with icon ### Input con icono
Añada un icono para indicar el tipo de Input.
Add an icon to indicate input type. ::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
```html ```html
<div class="demo-input-suffix"> <div class="demo-input-suffix">
<span class="demo-input-label">Using attributes</span> <span class="demo-input-label">Using attributes</span>
...@@ -245,9 +246,9 @@ export default { ...@@ -245,9 +246,9 @@ export default {
### Textarea ### Textarea
Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`. Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
::: demo Control the height by setting the `rows` prop. ::: demo Controle la altura ajustando el prop `rows`.
```html ```html
<el-input <el-input
...@@ -269,9 +270,9 @@ export default { ...@@ -269,9 +270,9 @@ export default {
``` ```
::: :::
### Autosize Textarea ### Textarea tamaño automatico
Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust. El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
::: demo ::: demo
...@@ -303,11 +304,11 @@ export default { ...@@ -303,11 +304,11 @@ export default {
``` ```
::: :::
### Mixed input ### Mezclando elementos con input
Prepend or append an element, generally a label or a button. Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
::: demo Use `slot` to distribute elements that prepend or append to Input. ::: demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
```html ```html
<div> <div>
...@@ -354,9 +355,10 @@ export default { ...@@ -354,9 +355,10 @@ export default {
``` ```
::: :::
### Sizes ### Tamaño
::: demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
```html ```html
<div class="demo-input-size"> <div class="demo-input-size">
<el-input <el-input
...@@ -395,11 +397,12 @@ export default { ...@@ -395,11 +397,12 @@ export default {
``` ```
::: :::
### Autocomplete ### Autocompletado
You can get some recommended tips based on the current input. Puede obtener algunas sugerencias basadas en la entrada actual.
::: demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
```html ```html
<el-row class="demo-autocomplete"> <el-row class="demo-autocomplete">
<el-col :span="12"> <el-col :span="12">
...@@ -468,11 +471,12 @@ You can get some recommended tips based on the current input. ...@@ -468,11 +471,12 @@ You can get some recommended tips based on the current input.
``` ```
::: :::
### Custom template ### Template personalizado
Personalice cómo se muestran las sugerencias.
Customize how suggestions are displayed. :::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
```html ```html
<el-autocomplete <el-autocomplete
popper-class="my-autocomplete" popper-class="my-autocomplete"
...@@ -555,9 +559,9 @@ Customize how suggestions are displayed. ...@@ -555,9 +559,9 @@ Customize how suggestions are displayed.
``` ```
::: :::
### Remote search ### Búsqueda remota
Search data from server-side. Búsqueda de datos desde el servidor.
::: demo ::: demo
```html ```html
...@@ -614,83 +618,83 @@ Search data from server-side. ...@@ -614,83 +618,83 @@ Search data from server-side.
``` ```
::: :::
### Input Attributes ### Input atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----| ----| ----| ---- | ----- | | ------------- | ---------------------------------------- | ---------------- | -------------------------------- | ----------- |
|type| type of input | string | text / textarea | text | | type | tipo de input | string | text / textarea | text |
|value| binding value | string / number| — | — | | value | valor enlazado | string / number | — | — |
|maxlength| maximum Input text length| number| — | — | | maxlength | el maximo para el largo del texto | number | — | — |
|minlength| minimum Input text length| number | — | — | | minlength | el mínimo para el largo del texto | number | — | — |
|placeholder| placeholder of Input| string | — | — | | placeholder | placeholder del Input | string | — | — |
|disabled | whether Input is disabled | boolean | — | false | | disabled | si esta deshabilitado | boolean | — | false |
|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — | | size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
| prefix-icon | prefix icon class | string | — | — | | prefix-icon | clase del icono de prefijo | string | — | — |
| suffix-icon | suffix icon class | string | — | — | | suffix-icon | clase del icono de sufijo | string | — | — |
|rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | | rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false | | autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
|auto-complete | same as `auto-complete` in native input | string | on/off | off | | auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off |
|name | same as `name` in native input | string | — | — | | name | igual que `name` en el input nativo | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false | | readonly | igual que `readonly` en el input nativo | boolean | — | false |
|max | same as `max` in native input | — | — | — | | max | igual que `max` en el input nativo | — | — | — |
|min | same as `min` in native input | — | — | — | | min | igual que `min` en el input nativo | — | — | — |
|step| same as `step` in native input | — | — | — | | step | igual que `step` en el input nativo | — | — | — |
|resize| control the resizability | string | none, both, horizontal, vertical | — | | resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — |
|autofocus | same as `autofocus` in native input | boolean | — | false | | autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
|form | same as `form` in native input | string | — | — | | form | igual que `form` en el input nativo | string | — | — |
| label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Input slots ### Input slots
| Name | Description | | Nombre | Descripción |
|------|--------| | ------- | ------------------------------------ |
| prefix | content as Input prefix | | prefix | contenido como prefijo del input |
| suffix | content as Input suffix | | suffix | contenido como sufijo del input |
| prepend | content to prepend before Input | | prepend | contenido antes del input |
| append | content to append after Input | | append | contenido a añadir después del input |
### Input Events ### Input eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|----| ----| ----| | ------ | ---------------------------------------- | ------------------------- |
| blur | triggers when Input blurs | (event: Event) | | blur | Se dispara cuando se pierde el foco | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | Se dispara cuando se obtiene el foco | (event: Event) |
| change | triggers when the icon inside Input value change | (value: string \| number) | | change | se activa cuando cambia el valor de entrada | (value: string \| number) |
### Autocomplete Attributes ### Autocomplete Atributos
Attribute | Description | Type | Options | Default Atributo | Descripción | Tipo | Opciones | Por defecto
|----| ----| ----| ---- | -----| |----| ----| ----| ---- | -----|
|placeholder| the placeholder of Autocomplete| string | — | — | |placeholder| el placeholder del Autocomplete| string | — | — |
|disabled | whether Autocomplete is disabled | boolean | — | false| |disabled | si el Autocompete esta deshabilitado | boolean | — | false|
| valueKey | key name of the input suggestion object for display | string | — | value | | valueKey | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value |
|icon | icon name | string | — | — | |icon | nombre del icono | string | — | — |
|value | binding value | string | — | — | |value | valor enlazado | string | — | — |
| debounce | debounce delay when typing, in milliseconds | number | — | 300 | | debounce | retardo al escribir, en milisegundos | number | — | 300 |
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — | |fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
| popper-class | custom class name for autocomplete's dropdown | string | — | — | | popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true | | trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
| on-icon-click | hook function when clicking on the input icon | function | — | — | | on-icon-click | funcion que se invoca cuando se hace click en el icono | function | — | — |
| name | same as `name` in native input | string | — | — | | name | igual que `name` en el input nativo | string | — | — |
| select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false | | select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
| label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Autocomplete slots ### Autocomplete slots
| Name | Description | | Nombre | Descripción |
|------|--------| | ------- | ------------------------------------ |
| prefix | content as Input prefix | | prefix | contenido como prefijo del input |
| suffix | content as Input suffix | | suffix | contenido como sufijo del input |
| prepend | content to prepend before Input | | prepend | contenido antes del input |
| append | content to append after Input | | append | contenido a añadir después del input |
### Autocomplete Events ### Autocomplete Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|----| ----| ----| | ------ | ---------------------------------------- | ---------------------------------------- |
|select | triggers when a suggestion is clicked | suggestion being clicked | | select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
### Methods ### Metodo
| Method | Description | Parameters | | Metodo | Descripción | Parametros |
|------|--------|-------| | ------ | ----------------------------- | ---------- |
| focus | focus the Input component | — | | focus | coloca el foco en el elemento | — |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment