1# switch 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<switch>** component is used to enable or disable a function. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Not supported 17 18 19## Attributes 20 21In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| -------- | ------- | ----- | ---- | ---------- | 25| checked | boolean | false | No | Whether the component is checked or not. | 26| showtext | boolean | false | No | Whether the component displays text. | 27| texton | string | "On" | No | Text displayed when the component is checked. | 28| textoff | string | "Off" | No | Text displayed when the component is not checked.| 29 30 31## Styles 32 33 34 35In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 36 37| Name | Type | Default Value | Mandatory | Description | 38| ------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 39| texton-color | <color> | \#000000 | No | Text color displayed when the component is checked. This attribute is available only when **texton** and **textoff** are set. | 40| textoff-color | <color> | \#000000 | No | Text color displayed when the component is not checked. This attribute is available only when **texton** and **textoff** are set. | 41| text-padding | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. | 42| font-size | <length> | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. | 43| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| 44| font-style | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see [font-style](../arkui-js/js-components-basic-text.md#styles) of the **\<text>** component.| 45| font-weight | number \| string | normal | No | Font weight. This attribute is available only when **texton** and **textoff** are set. For details, see [font-weight](../arkui-js/js-components-basic-text.md#styles) of the **\<text>** component.| 46| font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. This attribute is available only when **texton** and **textoff** are set.| 47 48 49## Events 50 51In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. 52 53| Name | Parameter | Description | 54| ------ | ---------------------------------------- | ------------- | 55| change | { checked: checkedValue } | Triggered when the **checked** state changes.| 56 57## Methods 58 59The [universal methods](../arkui-js/js-components-common-methods.md) are supported. 60 61## Example 62 63```html 64<!-- xxx.hml --> 65<div class="container"> 66 <switch @change="normalswitchChange"> 67 </switch> 68 <switch class="switch" showtext="true" texton="On" textoff="Off" @change="switchChange"> 69 </switch> 70 <switch class="switch text" showtext="true" texton="Switch on" textoff="Switch off" checked="true" @change="switchChange"> 71 </switch> 72</div> 73``` 74 75```css 76/* xxx.css */ 77.container { 78 display: flex; 79 justify-content: center; 80 align-items: center; 81} 82.switch { 83 texton-color: red; 84 textoff-color: forestgreen; 85} 86.text { 87 text-padding: 20px; 88 font-size: 30px; 89 font-weight: 700; 90} 91``` 92 93```js 94// xxx.js 95import promptAction from '@ohos.promptAction'; 96export default { 97 data: { 98 title: 'World' 99 }, 100 switchChange(e) { 101 if (e.checked) { 102 promptAction.showToast({ 103 message: "Switch on." 104 }); 105 } else { 106 promptAction.showToast({ 107 message: "Switch off." 108 }); 109 } 110 }, 111 normalswitchChange(e) { 112 if (e.checked) { 113 promptAction.showToast({ 114 message: "switch on" 115 }); 116 } else { 117 promptAction.showToast({ 118 message: "switch off" 119 }); 120 } 121 } 122} 123``` 124 125 126
