mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 19:27:44 +08:00
4ccb8ea9ae
* init i18n * update router * finish router * Review: message/messageBox/notification * Tag: update doc * Review: pagination/popover/progress * i18n: sync with master
1.9 KiB
1.9 KiB
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
<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
<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 | --- | #20A0FF |
off-color | If component is in 'off' state, set the background color of component | string | --- | #C0CCDA |
name | The name of component | string | --- | --- |
Events
Event | Description | Callback Parameter |
---|---|---|
change | Change the state and then trigger the callback function | --- |