Update switch.md

pull/8219/head
ProgramerGuy 2017-11-10 17:27:10 -06:00 committed by 杨奕
parent 3764f1a373
commit 02f67dd309
1 changed files with 28 additions and 26 deletions

View File

@ -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 | —