element/examples/docs/en-US/switch.md

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