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 @@
.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` 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
<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 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 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 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 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 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 |
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
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.
\ No newline at end of file
examples/docs/es/icon.md
View file @ 11b29e14
......@@ -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">
......
examples/docs/es/input-number.md
View file @ 11b29e14
......@@ -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
| 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
| 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) |
### Methods
| Method | Description | Parameters |
|------|--------|-------|
| focus | focus the Input component | - |
### Atributos
| 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
| 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) |
### Métodos
| Método | Descripción | Parámetro |
| ------ | ------------------------- | ---------- |
| 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 @@
.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
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
<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 |
## 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 |
## 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 |
## 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 |
examples/docs/es/steps.md
View file @ 11b29e14
......@@ -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
| 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 |
### 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 | - |
### Steps atributos
| 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 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 |
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