mirror of https://github.com/ElemeFE/element
67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
|
## switch
|
||
|
|
|
||
|
|
Switch component is used for switching the component between two opposing state.
|
||
|
|
|
||
|
|
### How to use
|
||
|
|
|
||
|
|
Use `v-model` directly to bind a **boolean** value to this component and control the opposing states. Additionally you can add `on-text` or `off-text` attribute to show the message when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the backgroundcolor of this component in different states.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-switch
|
||
|
|
v-model="value1"
|
||
|
|
on-text=""
|
||
|
|
off-text="">
|
||
|
|
</el-switch>
|
||
|
|
<el-switch
|
||
|
|
v-model="value2"
|
||
|
|
on-color="#13ce66"
|
||
|
|
off-color="#ff4949">
|
||
|
|
</el-switch>
|
||
|
|
```
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
### disabled
|
||
|
|
|
||
|
|
`disabled` attribute means whether the component need to be disabled or not.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-switch
|
||
|
|
v-model="value3"
|
||
|
|
on-text=""
|
||
|
|
off-text=""
|
||
|
|
disabled>
|
||
|
|
</el-switch>
|
||
|
|
<el-switch
|
||
|
|
v-model="value3"
|
||
|
|
disabled>
|
||
|
|
</el-switch>
|
||
|
|
```
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
### Attributes
|
||
|
|
|
||
|
|
Attribute | Description | Type | Options | Default
|
||
|
|
----| ----| ----| ----|----
|
||
|
|
disbaled | Disable the component or not | boolean | --- | false
|
||
|
|
width| The width of component | number | --- | 58 (with text) / 46 (no text)
|
||
|
|
on-close-icon| If component is in 'on' state, set the classes of icon | string | ---| ---
|
||
|
|
off-close-icon|If component is in 'off' state, set the classes of icon| string | ---| ---
|
||
|
|
on-text | If component is in 'on' state, set the text of component | string | --- | ON
|
||
|
|
off-text | If component is in 'off' state, set the text of component | string | --- | OFF
|
||
|
|
on-color | If component is in 'on' state, set the background color of component | string | --- | <span style="background-color: #20A0FF">#20A0FF</span>
|
||
|
|
off-color | If component is in 'off' state, set the background color of component | string | --- | <span style="background-color: #C0CCDA">#C0CCDA</span>
|
||
|
|
name| The name of component | string | --- | ---
|
||
|
|
|
||
|
|
### Events
|
||
|
|
|
||
|
|
Event | Description | Callback Parameter
|
||
|
|
---- | ----| ----
|
||
|
|
change | Change the state and then trigger the callback function | ---
|
||
|
|
|