Skip to content

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

Merge pull request #8123 from Gonzalo2310/es-doc 

Cascader / dropdown / i18n spanish version
parents cb9a1cb3 0d8a123a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 520 additions and 487 deletions
examples/docs/es/cascader.md
View file @ 11b29e14
This diff is collapsed.
examples/docs/es/dropdown.md
View file @ 11b29e14
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.demo-box { .demo-box {
.el-dropdown { .el-dropdown {
vertical-align: top; vertical-align: top;
& + .el-dropdown { & + .el-dropdown {
margin-left: 15px; margin-left: 15px;
} }
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;
border-right: 1px solid #eff2f6; border-right: 1px solid #eff2f6;
&:last-child { &:last-child {
border-right: 0; border-right: 0;
} }
...@@ -51,12 +51,12 @@ ...@@ -51,12 +51,12 @@
} }
</script> </script>
## Dropdown ## Dropdown
Toggleable menu for displaying lists of links and actions. Menú conmutable para visualizar listas de enlaces y acciones.
### Basic usage ### Uso básico
Hover on the dropdown menu to unfold it for more actions. Pase el ratón por el menú desplegable para desplegarlo y obtener más acciones.
:::demo The triggering element is rendered by the default `slot`, and the dropdown part is rendered by the `slot` named `dropdown`. By default, dropdown list shows when you hover on the triggering element without having to click it. :::demo El elemento desencadenante se representa con el slot predeterminado, y la parte desplegable se representa con el slot llamado dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.
```html ```html
<el-dropdown> <el-dropdown>
...@@ -86,11 +86,12 @@ Hover on the dropdown menu to unfold it for more actions. ...@@ -86,11 +86,12 @@ Hover on the dropdown menu to unfold it for more actions.
::: :::
### Triggering element Elemento detonante
Use the button to trigger the dropdown list. Utilizando un botón para activar la lista desplegable.
:::demo Utilice `split-button` para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonacion. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, sólo añada un divisor de clase a la posición cuatro.
:::demo Use `split-button` to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class `divider` to item four.
```html ```html
<el-dropdown> <el-dropdown>
<el-button type="primary"> <el-button type="primary">
...@@ -139,11 +140,11 @@ Use the button to trigger the dropdown list. ...@@ -139,11 +140,11 @@ Use the button to trigger the dropdown list.
``` ```
::: :::
### How to trigger ### Cómo detonar el evento
Click the triggering element or hover on it. Haga clic en el elemento detonante o sobre él.
:::demo Use the attribute `trigger`. By default, it is `hover`. :::demo Utilice el atributo `trigger`. Por defecto, es `hover`.
```html ```html
<el-row class="block-col-2"> <el-row class="block-col-2">
...@@ -197,11 +198,12 @@ Click the triggering element or hover on it. ...@@ -197,11 +198,12 @@ Click the triggering element or hover on it.
``` ```
::: :::
### Menu hiding behavior ### Ocultamiento del menú
Use `hide-on-click` para definir si el menú se cierra al hacer clic.
Use `hide-on-click` to define if menu closes on clicking. :::demo El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando `hide-on-click` como false.
:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false.
```html ```html
<el-dropdown :hide-on-click="false"> <el-dropdown :hide-on-click="false">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
...@@ -228,9 +230,9 @@ Use `hide-on-click` to define if menu closes on clicking. ...@@ -228,9 +230,9 @@ Use `hide-on-click` to define if menu closes on clicking.
``` ```
::: :::
### Command event ### Evento command
Clicking each dropdown item fires an event whose parameter is assigned by each item. Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada elemento.
:::demo :::demo
```html ```html
...@@ -269,11 +271,11 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i ...@@ -269,11 +271,11 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
``` ```
::: :::
### Sizes ### Tamaños
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios. Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. :::demo Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
```html ```html
<el-dropdown split-button type="primary"> <el-dropdown split-button type="primary">
...@@ -319,28 +321,28 @@ Besides default size, Dropdown component provides three additional sizes for you ...@@ -319,28 +321,28 @@ Besides default size, Dropdown component provides three additional sizes for you
::: :::
### Dropdown Attributes ### Dropdown atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|------------- |---------------- |---------------- |---------------------- |-------- | | ------------- | ---------------------------------------- | ------- | ---------------------------------------- | ----------- |
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — | | type | tipo de botón de menú, consulte Componente`Button`, sólo funciona cuando `split-button` es true. | string | — | — |
| size | menu size, also works on the split button | string | medium / small / mini | — | | size | tamaño del menú, también funciona en `split-button` | string | medium / small / mini | — |
| split-button | whether a button group is displayed | boolean | — | false | | split-button | si se visualiza un grupo de botones | boolean | — | false |
| placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end | | placement | colocación del menú | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
| trigger | how to trigger | string | hover/click | hover | | trigger | cómo detonar | string | hover/click | hover |
| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true | | hide-on-click | si se oculta el menú después de hacer clic en el elemento | boolean | — | true |
| show-timeout | Delay time before show a dropdown | number | — | 250 | | show-timeout | Tiempo de retardo antes de mostrar un dropdown | number | — | 250 |
| hide-timeout | Delay time before hide a dropdown | number | — | 150 | | hide-timeout | Tiempo de retardo antes de ocultar un dropdown | number | — | 150 |
### Dropdown Events ### Dropdown Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | | -------------- | ---------------------------------------- | ---------------------------------------- |
| click | if `split-button` is `true`, triggers when left button is clicked | — | | click | si `split-button` es `true`, se activa al hacer clic en el botón izquierdo | — |
| command | triggers when a dropdown item is clicked | the command dispatched from the dropdown item | | command | activa cuando se hace clic en un elemento desplegable | el comando enviado desde el elemento desplegable |
| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise | | visible-change | se activa cuando aparece/desaparece el desplegable | true cuando aparece, y false de otro modo |
### Dropdown Menu Item Attributes ### Dropdown Menu Item Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|------------- |---------------- |---------------- |---------------------- |-------- | | -------- | ---------------------------------------- | -------------------- | ----------------- | ----------- |
| command | a command to be dispatched to Dropdown's `command` callback | string/number/object | — | — | | command | un comando que se enviará al `command` callback del Dropdown | string/number/object | — | — |
| disabled | whether the item is disabled | boolean | — | false | | disabled | si el elemento está desactivado | boolean | — | false |
| divided | whether a divider is displayed | boolean | — | false | | divided | si se visualiza un divisor | boolean | — | false |
examples/docs/es/form.md
View file @ 11b29e14
This diff is collapsed.
examples/docs/es/i18n.md
View file @ 11b29e14
## Internationalization ## Internacionalización
The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely: El idioma predeterminado de Element es el chino. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element por completo:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -10,7 +10,7 @@ import locale from 'element-ui/lib/locale/lang/en' ...@@ -10,7 +10,7 @@ import locale from 'element-ui/lib/locale/lang/en'
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })
``` ```
Or if you are importing Element on demand: O si está importando Element a petición:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -26,7 +26,7 @@ Vue.component(Button.name, Button) ...@@ -26,7 +26,7 @@ Vue.component(Button.name, Button)
Vue.component(Select.name, Select) Vue.component(Select.name, Select)
``` ```
The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale: El paquete de idioma chino se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
webpack.config.js webpack.config.js
```javascript ```javascript
...@@ -37,9 +37,9 @@ webpack.config.js ...@@ -37,9 +37,9 @@ webpack.config.js
} }
``` ```
## Compatible with `vue-i18n@5.x` ## Compatible con `vue-i18n@5.x`
Element is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier. Element es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilingüe.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -56,8 +56,8 @@ Vue.locale('zh-cn', zhLocale) ...@@ -56,8 +56,8 @@ Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale) Vue.locale('en', enLocale)
``` ```
## Compatible with other i18n plugins ## Compatible con otros plugins i18n
Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n. Es posible que Element no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element procesa i18n.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -72,9 +72,9 @@ Vue.use(Element, { ...@@ -72,9 +72,9 @@ Vue.use(Element, {
}) })
``` ```
## Compatible with `vue-i18n@6.x` ## Compatible con `vue-i18n@6.x`
You need to manually handle it for compatibility with `6.x`. Necesita manejarlo manualmente para ser compatible con `6.x`.
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue'
...@@ -108,7 +108,7 @@ Vue.use(Element, { ...@@ -108,7 +108,7 @@ Vue.use(Element, {
new Vue({ i18n }).$mount('#app') new Vue({ i18n }).$mount('#app')
``` ```
## Custom i18n in on-demand components ## Personalización de i18n en componentes bajo petición
```js ```js
import Vue from 'vue' import Vue from 'vue'
...@@ -141,7 +141,7 @@ const i18n = new VueI18n({ ...@@ -141,7 +141,7 @@ const i18n = new VueI18n({
ElementLocale.i18n((key, value) => i18n.t(key, value)) ElementLocale.i18n((key, value) => i18n.t(key, value))
``` ```
## Import via CDN ## Importar via CDN
```html ```html
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
...@@ -153,7 +153,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value)) ...@@ -153,7 +153,7 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
</script> </script>
``` ```
Compatible with `vue-i18n` Compatible con `vue-i18n`
```html ```html
<script src="//unpkg.com/vue"></script> <script src="//unpkg.com/vue"></script>
...@@ -168,7 +168,7 @@ Compatible with `vue-i18n` ...@@ -168,7 +168,7 @@ Compatible with `vue-i18n`
</script> </script>
``` ```
Currently Element ships with the following languages: Actualmente Element está disponible en los siguientes idiomas:
<ul class="language-list"> <ul class="language-list">
<li>Simplified Chinese (zh-CN)</li> <li>Simplified Chinese (zh-CN)</li>
<li>English (en)</li> <li>English (en)</li>
...@@ -209,4 +209,4 @@ Currently Element ships with the following languages: ...@@ -209,4 +209,4 @@ Currently Element ships with the following languages:
<li>Hebrew (he)</li> <li>Hebrew (he)</li>
</ul> </ul>
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request. Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.
\ No newline at end of file
examples/docs/es/icon.md
View file @ 11b29e14
...@@ -67,11 +67,11 @@ ...@@ -67,11 +67,11 @@
## Icon ## Icon
Element provides a set of common icons. Element proporciona un conjunto de iconos propios.
### Basic usage ### Uso básico
Just assign the class name to `el-icon-iconName`. Simplemente asigna el nombre de la clase a `el-icon-iconName`.
:::demo :::demo
...@@ -84,7 +84,7 @@ Just assign the class name to `el-icon-iconName`. ...@@ -84,7 +84,7 @@ Just assign the class name to `el-icon-iconName`.
``` ```
::: :::
### Icons ### Iconos
<ul class="icon-list"> <ul class="icon-list">
<li v-for="name in icons" :key="name"> <li v-for="name in icons" :key="name">
......
examples/docs/es/input-number.md
View file @ 11b29e14
...@@ -30,11 +30,11 @@ ...@@ -30,11 +30,11 @@
## InputNumber ## InputNumber
Input numerical values with a customizable range. Input de valores numéricos con un rango personalizable.
### Basic usage ### Uso básico
:::demo Bind a variable to `v-model` in `<el-input-number>` element and you are set. :::demo Vincule una variable con `v-model` en el elemento <el-input-number> y estará listo.
```html ```html
<template> <template>
...@@ -59,7 +59,7 @@ Input numerical values with a customizable range. ...@@ -59,7 +59,7 @@ Input numerical values with a customizable range.
### Disabled ### Disabled
:::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`. :::demo El atributo `disabled` acepta un valor `boolean`, y si el valor es `true`, el componente queda deshabilitado. Si sólo necesita controlar el valor dentro de un rango, puede añadir un atributo `min` para establecer el valor mínimo y un valor `max` para establecer el valor máximo. Por defecto, el valor mínimo es `0`.
```html ```html
<template> <template>
...@@ -79,9 +79,9 @@ Input numerical values with a customizable range. ...@@ -79,9 +79,9 @@ Input numerical values with a customizable range.
### Steps ### Steps
Allows you to define incremental steps. Le permite definir el nivel de incremento de los saltos.
:::demo Add `step` attribute to set the step. :::demo Añada el atributo `step` para establecer el salto.
```html ```html
<template> <template>
...@@ -99,9 +99,9 @@ Allows you to define incremental steps. ...@@ -99,9 +99,9 @@ Allows you to define incremental steps.
``` ```
::: :::
### Size ### Tamaño
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `small` o `mini`.
:::demo :::demo
...@@ -127,9 +127,10 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ...@@ -127,9 +127,10 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
``` ```
::: :::
### Controls Position ### Posición de los controles
:::demo Establezca `controls-position` para decidir la posición de los botones de control.
:::demo Set `controls-position` to decide the position of control buttons.
```html ```html
<template> <template>
<el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number> <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
...@@ -151,30 +152,30 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`. ...@@ -151,30 +152,30 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
``` ```
::: :::
### Attributes ### Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|----| ----| ---| ----| -----| | ----------------- | ---------------------------------------- | ------- | --------------- | ---------- |
|value | binding value| number | — | — | | value | valor vinculado | number | — | — |
|min | the minimum allowed value | number | — | 0 | | min | el valor mínimo permitido | number | — | 0 |
|max | the maximum allowed value | number | — | `Infinity` | | max | el valor maximo permitido | number | — | `Infinity` |
|step | incremental step | number | — | 1 | | step | incremento (salto) | number | — | 1 |
|size | size of the component | string | large/small| — | | size | tamaño del componente | string | large/small | — |
|disabled| whether the component is disabled | boolean | — | false | | disabled | si el componente esta deshabilitado | boolean | — | false |
|controls| whether to enable the control buttons | boolean | — | true | | controls | si se activan los botones de control | boolean | — | true |
|debounce| debounce delay when typing, in milliseconds | number | — | 300 | | debounce | retardo de rebote al escribir, en milisegundos | number | — | 300 |
|controls-position | position of the control buttons | string | right | - | | controls-position | posición de los botones de control | string | right | - |
|name | same as `name` in native input | string | — | — | | name | lo mismo que `name` en un input nativo | string | — | — |
|label | label text | string | — | — | | label | texto de la etiqueta | string | — | — |
### Events ### Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parámetros |
|----| ---- | -----| | ---------- | ------------------------------- | ------------------ |
|change | triggers when the value changes | value after change | | change | se produce cuando el valor cambia | value after change |
| blur | triggers when Input blurs | (event: Event) | | blur | se produce cuando el componente pierde el foco | (event: Event) |
| focus | triggers when Input focuses | (event: Event) | | focus | se produce cuando el componente obtiene el foco | (event: Event) |
### Methods ### Métodos
| Method | Description | Parameters | | Método | Descripción | Parámetro |
|------|--------|-------| | ------ | ------------------------- | ---------- |
| focus | focus the Input component | - | | focus | coloca el foco en el elemento actual | - |
examples/docs/es/input.md
View file @ 11b29e14
This diff is collapsed.
examples/docs/es/select.md
View file @ 11b29e14
This diff is collapsed.
examples/docs/es/slider.md
View file @ 11b29e14
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.demo-box.demo-slider .source { .demo-box.demo-slider .source {
padding: 0; padding: 0;
} }
.demo-box.demo-slider .block { .demo-box.demo-slider .block {
padding: 30px 24px; padding: 30px 24px;
overflow: hidden; overflow: hidden;
...@@ -35,13 +35,13 @@ ...@@ -35,13 +35,13 @@
border-bottom: none; border-bottom: none;
} }
} }
.demo-box.demo-slider .demonstration { .demo-box.demo-slider .demonstration {
font-size: 14px; font-size: 14px;
color: #8492a6; color: #8492a6;
line-height: 44px; line-height: 44px;
} }
.demo-box.demo-slider .demonstration + .el-slider { .demo-box.demo-slider .demonstration + .el-slider {
float: right; float: right;
width: 70%; width: 70%;
...@@ -51,13 +51,13 @@ ...@@ -51,13 +51,13 @@
## Slider ## Slider
Drag the slider within a fixed range. Desliza el slider dentro de un rango fijo.
### Basic usage ### Uso básico
The current value is displayed when the slider is being dragged. El valor actual se muestra cuando se inicia el arrastre del slider.
:::demo Customize the initial value of the slider by setting the binding value. :::demo Personalice el valor inicial del slider configurando el valor vinculado.
```html ```html
<template> <template>
...@@ -104,12 +104,14 @@ The current value is displayed when the slider is being dragged. ...@@ -104,12 +104,14 @@ The current value is displayed when the slider is being dragged.
``` ```
::: :::
### Discrete values ### Valores discretos
The options can be discrete. Las opciones pueden ser discretas.
:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute. :::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.
Configure el tamaño del paso con el atributo `step`. Puede visualizar los puntos de ruptura configurando el atributo `show-stops`.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -142,11 +144,11 @@ The options can be discrete. ...@@ -142,11 +144,11 @@ The options can be discrete.
``` ```
::: :::
### Slider with input box ### Slider con input
Set value via a input box. Inserte el valor a traves de un input
:::demo Set the `show-input` attribute to display an input box on the right. :::demo Configure el atributo `show-input` para que muestre un input a la derecha.
```html ```html
<template> <template>
...@@ -170,11 +172,12 @@ Set value via a input box. ...@@ -170,11 +172,12 @@ Set value via a input box.
``` ```
::: :::
### Range selection ### Seleccion de rangos
Se soporta la selección de un rango de valores.
Selecting a range of values is supported. :::demo El ajuste del atributo `range` activa el modo range, donde el valor vinculado es un array compuesto por dos valores límite.
:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -199,9 +202,10 @@ Selecting a range of values is supported. ...@@ -199,9 +202,10 @@ Selecting a range of values is supported.
``` ```
::: :::
### Vertical mode ### Modo Vertical
:::demo El ajuste del atributo `vertical` a `true` habilita el modo vertical. En el modo vertical, se requiere el atributo `height` .
:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
```html ```html
<template> <template>
<div class="block"> <div class="block">
...@@ -225,26 +229,26 @@ Selecting a range of values is supported. ...@@ -225,26 +229,26 @@ Selecting a range of values is supported.
``` ```
::: :::
## Attributes ## Atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------------- |---------- |-------------------------------- |-------- | | ------------------- | ---------------------------------------- | --------------- | ----------------- | ----------- |
| min | minimum value | number | — | 0 | | min | valor minimo | number | — | 0 |
| max | maximum value | number | — | 100 | | max | valor máximo | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false | | disabled | si el Slider esta deshabitado | boolean | — | false |
| step | step size | number | — | 1 | | step | tamaño del paso | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false | | show-input | Si se muestra el input, trabaja cuando`range`es false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true | | show-input-controls | si se muestran los botones de control cuando`show-input`es true | boolean | — | true |
| show-stops | whether to display breakpoints | boolean | — | false | | show-stops | si se muestran los puntos de ruptura (breakpoints) | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true | | show-tooltip | si se muestra el valor en un tooltip | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — | | format-tooltip | formato para mostrar el valor del tooltip | function(value) | — | — |
| range | whether to select a range | boolean | — | false | | range | si se usaran un rango | boolean | — | false |
| vertical | vertical mode | boolean | — | false | | vertical | modo vertical | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — | | height | alto del Slider, requerido en modo vertical | string | — | — |
| label | label for screen reader | string | — | — | | label | etiqueta para screen reader | string | — | — |
|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 | | debounce | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number | — | 300 |
## Events ## Eventos
| Event Name | Description | Parameters | | Nombre | Descripción | Parametros |
|---------- |-------- |---------- | | ------ | ---------------------------------------- | ------------------------ |
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing | | change | se dispara cuando el valor cambia (si el ratón está comenzando el arrastre este evento sólo se disparara cuando se suelte el ratón) | valor despues del cambio |
examples/docs/es/steps.md
View file @ 11b29e14
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
active: 0 active: 0
}; };
}, },
methods: { methods: {
next() { next() {
if (this.active++ > 2) this.active = 0; if (this.active++ > 2) this.active = 0;
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
## Steps ## Steps
Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. Guía al usuario para completar tareas de acuerdo con el proceso. Sus pasos pueden configurarse de acuerdo con el escenario de aplicación real y el número de pasos no puede ser inferior a dos.
### Basic usage ### Uso básico
Simple step bar. Barra de pasos simple.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed. :::demo Defina el atributo `active` con un valor de tipo `Number`, que indica el índice de pasos y comienza desde 0. Puede definir el atributo `space` cuando es necesario fijar el ancho del paso que acepta el tipo `Boolean`. La unidad del atributo `space` es px. Si no está configurado, es responsive. La configuración del atributo `finish-status` puede cambiar el estado de los pasos completados.
```html ```html
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success">
...@@ -51,11 +51,11 @@ Simple step bar. ...@@ -51,11 +51,11 @@ Simple step bar.
``` ```
::: :::
### Step bar that contains status ### Step bar con el status
Shows the status of the step for each step. Muestra el estado del step para cada paso.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page. :::demo Utilice el atributo `title` para establecer el nombre del paso, o sobreescriba el atributo usando un slot con nombre. Hemos enumerado todos los nombres de slots al final de esta página.
```html ```html
<el-steps :space="200" :active="1" finish-status="success"> <el-steps :space="200" :active="1" finish-status="success">
...@@ -66,9 +66,9 @@ Shows the status of the step for each step. ...@@ -66,9 +66,9 @@ Shows the status of the step for each step.
``` ```
::: :::
### Center ### Centrado
Title and desription can be centered. El título y la descripción pueden estar centrados.
:::demo :::demo
```html ```html
...@@ -81,9 +81,9 @@ Title and desription can be centered. ...@@ -81,9 +81,9 @@ Title and desription can be centered.
``` ```
::: :::
### Step bar with description ### Step bar con descripción
There is description for each step. Puede poner una descripción para cada paso.
:::demo :::demo
```html ```html
...@@ -97,9 +97,9 @@ There is description for each step. ...@@ -97,9 +97,9 @@ There is description for each step.
### Step bar with icon ### Step bar with icon
A variety of custom icons can be used in the step bar. En la barra de pasos se pueden utilizar diversos iconos personalizados.
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`. :::demo El icono se define mediante la propiedad `icon`. Los tipos de iconos se pueden encontrar en la descripción del componente Icono. Además, puede personalizar el icono a través de un slot con nombre.
```html ```html
<el-steps :active="1"> <el-steps :active="1">
...@@ -110,11 +110,11 @@ A variety of custom icons can be used in the step bar. ...@@ -110,11 +110,11 @@ A variety of custom icons can be used in the step bar.
``` ```
::: :::
### Vertical step bar ### Step bar vertical
Vertical step bars. Step bar vertical.
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element. :::demo Sólo tiene que fijar el atributo `direction` a ` vertical` en el elemento `el-steps`.
```html ```html
<div style="height: 300px;"> <div style="height: 300px;">
...@@ -127,8 +127,8 @@ Vertical step bars. ...@@ -127,8 +127,8 @@ Vertical step bars.
``` ```
::: :::
### Simple step bar ### Step bar simple
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored. Step bar simple, donde se ignorará `align-center`, `description`, `direction` y `space`.
:::demo :::demo
```html ```html
...@@ -147,30 +147,30 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w ...@@ -147,30 +147,30 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w
``` ```
::: :::
### Steps Attributes ### Steps atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | -------------- | ---------------------------------------- | --------------- | ---------------------------------------- | ----------- |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — | | space | el espaciado de cada paso, será responsivo si se omite. Soporta porcentaje. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal | | direction | dirección de visualización | string | vertical/horizontal | horizontal |
| active | current activation step | number | — | 0 | | active | actual paso de activación | number | — | 0 |
| process-status | status of current step | string | wait / process / finish / error / success | process | | process-status | status del paso actual | string | wait / process / finish / error / success | process |
| finish-status | status of end step | string | wait / process / finish / error / success | finish | | finish-status | status del paso final | string | wait / process / finish / error / success | finish |
| align-center | center title and description | boolean | — | false | | align-center | centrado de título y descripción | boolean | — | false |
| simple | whether to apply simple theme | boolean | - | false | | simple | si aplicar un tema simple | boolean | - | false |
### Step Attributes ### Step atributos
| Attribute | Description | Type | Accepted Values | Default | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|---------- |-------- |---------- |------------- |-------- | | ----------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
| title | step title | string | — | — | | title | titulo del paso | string | — | — |
| description | step description | string | — | — | | description | descripción del paso | string | — | — |
| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — | | icon | icono del paso | nombre de la clase del icono del paso. Los iconos también se pueden pasar a través del slot con nombre | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - | | status | estado actual. Se configurará automáticamente mediante Steps si no está configurado. | wait / process / finish / error / success | - | |
### Step Slot ### Step Slot
| Name | Description | | Name | Description |
|----|----| | ----------- | -------------------- |
| icon | custom icon | | icon | Icono personalizado |
| title | step title | | title | Titulo del paso |
| description | step description | | description | Descripcion del paso |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment