1# switch
2
3The **\<switch>** component is used to enable or disable a function.
4
5> **NOTE**
6>
7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17| Name| Type| Default Value| Mandatory| Description|
18| -------- | -------- | -------- | -------- | -------- |
19| checked | boolean | false | No| Whether the component is checked or not.|
20| id | string | - | No| Unique ID of the component.|
21| style | string | - | No| Style declaration of the component.|
22| class | string | - | No| Style class of the component, which is used to refer to a style table.|
23| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.|
24
25
26## Events
27
28| Name| Parameter| Description|
29| -------- | -------- | -------- |
30| change | { checked: checkedValue } | Triggered when the **checked** state changes.|
31| click | - | Triggered when the component is clicked. |
32| longpress | - | Triggered when the component is long pressed. |
33| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. |
34
35
36## Styles
37
38| Name| Type| Default Value| Mandatory| Description|
39| -------- | -------- | -------- | -------- | -------- |
40| width | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.|
41| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.|
42| padding | &lt;length&gt; | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
43| padding-[left\|top\|right\|bottom] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
44| margin | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
45| margin-[left\|top\|right\|bottom] | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.|
46| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
47| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
48| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
49| background-color | &lt;color&gt; | - | No| Background color.|
50| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
51| [left\|top] | &lt;length&gt; \| &lt;percentage&gt;<sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
52
53## Example
54
55```html
56<!-- xxx.hml -->
57<div class="container">
58  <div class="box">
59    <switch checked="true" @change="switchChange"></switch>
60    <text>{{title}}</text>
61  </div>
62</div>
63```
64
65```css
66/* xxx.css */
67.container {
68  width: 100%;
69  height: 100%;
70  justify-content: center;
71  align-items: center;
72}
73.box{
74  width: 18%;
75  height: 25%;
76  flex-direction:column;
77  justify-content: center;
78  align-items: center;
79}
80```
81
82```javascript
83// xxx.js
84export default {
85  data: {
86      title: 'on'
87  },
88  switchChange(e){
89      console.log(e.checked);
90      if(e.checked){
91          this.title="on"
92      }else{
93          this.title="off"
94      }
95  }
96}
97```
98
99![switch](figures/switch-lite.gif)
100