mirror of https://github.com/ElemeFE/element
Update switch.md
parent
3764f1a373
commit
02f67dd309
|
@ -24,10 +24,11 @@
|
|||
|
||||
## Switch
|
||||
|
||||
Switch is used for switching between two opposing states.
|
||||
Switch es utilizdo para realizar cambios entre dos estados opuestos.
|
||||
|
||||
### Basic usage
|
||||
:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
|
||||
### Uso básico
|
||||
|
||||
:::demo Enlaza `v-model` a una variable de tipo `Boolean`. Los atributos `active-color` y `inactive-color` deciden el color de fondo en cada estado.
|
||||
|
||||
```html
|
||||
<el-switch v-model="value1">
|
||||
|
@ -51,8 +52,8 @@ Switch is used for switching between two opposing states.
|
|||
```
|
||||
:::
|
||||
|
||||
### Text description
|
||||
:::demo You can add `active-text` and `inactive-text` attribute to show texts.
|
||||
### Texto de descripción
|
||||
:::demo Puedes agregar los atributos `active-text` y `inactive-text` para mostrar los textos.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
|
@ -82,9 +83,9 @@ Switch is used for switching between two opposing states.
|
|||
```
|
||||
:::
|
||||
|
||||
### Extended value types
|
||||
### Tipos de valores extendidos
|
||||
|
||||
:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
|
||||
:::demo Puedes establecer los atributos `active-value` y `inactive-value`. Ambos reciben valores de tipo `Boolean`, `String` o `Number`.
|
||||
|
||||
```html
|
||||
<el-tooltip :content="'Switch value: ' + value5" placement="top">
|
||||
|
@ -112,7 +113,7 @@ Switch is used for switching between two opposing states.
|
|||
|
||||
### Disabled
|
||||
|
||||
:::demo Adding the `disabled` attribute disables Switch.
|
||||
:::demo Agregar el atributo `disabled` desactiva el componente Switch.
|
||||
|
||||
```html
|
||||
<el-switch
|
||||
|
@ -137,29 +138,30 @@ Switch is used for switching between two opposing states.
|
|||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
### Atributos
|
||||
|
||||
Attribute | Description | Type | Accepted Values | Default
|
||||
Atributo | Descripción | Tipo | Valores aceptados | Por defecto
|
||||
----| ----| ----| ----|----
|
||||
disabled | whether Switch is disabled | boolean | — | false
|
||||
width | width of Switch | number | — | 40
|
||||
active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
|
||||
inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
|
||||
active-text | text displayed when in `on` state | string | — | —
|
||||
inactive-text | text displayed when in `off` state | string | — | —
|
||||
active-value | switch value when in `on` state | boolean / string / number | — | true
|
||||
inactive-value | switch value when in `off` state | boolean / string / number | — | false
|
||||
active-color | background color when in `on` state | string | — | #409EFF
|
||||
inactive-color | background color when in `off` state | string | — | #C0CCDA
|
||||
name| input name of Switch | string | — | —
|
||||
width | ancho del componente Switch | number | — | 40
|
||||
active-icon-class | nombre de la clase del icono mostrado en el estado `on`, sobreescribe `active-text` | string | — | —
|
||||
inactive-icon-class |nombre de la clase del icono mostrado en el estado `off`, sobreescribe `inactive-text`| string | — | —
|
||||
active-text | texto mostrado en el estado `on` | string | — | —
|
||||
inactive-text | texto mostrado en el estado `off` | string | — | —
|
||||
active-value | cambia su valor cuando se encuentra en el estado `on` | boolean / string / number | — | true
|
||||
inactive-value | cambia su valor cuando se encuentra en el estado `off` | boolean / string / number | — | false
|
||||
active-color | color de fondo cuando se encuentra en el estado `on` | string | — | #409EFF
|
||||
inactive-color | color de fondo cuando se encuentra en el estado `off` | string | — | #C0CCDA
|
||||
name| nombre de entrada del componente Switch | string | — | —
|
||||
|
||||
### Events
|
||||
### Eventos
|
||||
|
||||
Event Name | Description | Parameters
|
||||
Nombre del evento | Descripción | Parametro
|
||||
---- | ----| ----
|
||||
change | triggers when value changes | value after changing
|
||||
change | se dispara cuando el valor cambia | valor
|
||||
después de cambiar
|
||||
|
||||
### Methods
|
||||
Method | Description | Parameters
|
||||
### Metodos
|
||||
Metodo | Descripción | Parametro
|
||||
------|--------|-------
|
||||
focus | focus the Switch component | —
|
||||
focus | foco al componente Switch | —
|
||||
|
|
Loading…
Reference in New Issue