1# switch 2 3The **\<switch>** component is used to enable or disable a function. 4 5## Required Permissions 6 7None 8 9## Child Components 10 11None 12 13## Attributes 14 15In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. 16 17 18 19| Name | Type | Default Value | Mandatory | Description | 20| -------- | ------- | ------------- | --------- | ------------------------------------------------- | 21| checked | boolean | false | No | Whether the component is checked or not. | 22| showtext | boolean | false | No | Whether the component displays text. | 23| texton | string | "On" | No | Text displayed when the component is checked. | 24| textoff | string | "Off" | No | Text displayed when the component is not checked. | 25 26## Styles 27 28In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. 29 30 31 32| Name | Type | Default Value | Mandatory | Description | 33| ------------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | 34| texton-color(Rich) | \<color> | #000000 | No | Text color displayed when the component is checked. | 35| textoff-color(Rich) | \<color> | #000000 | No | Text color displayed when the component is not checked. | 36| text-padding(Rich) | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. | 37| font-size(Rich) | \<length> | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. | 38| allow-scale(Rich) | boolean | true | No | Whether the font size changes with the system's font size settings.NOTE:If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | 39| font-style(Rich) | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see [font-style](js-components-basic-text.md) of the **text** component. | 40| font-weight(Rich) | number \| string | normal | No | Font weight. This attribute is available only when **texton** and **textoff** are set. For details, see [font-weight](js-components-basic-text.md) of the **text** component. | 41| font-family(Rich) | 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 font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. This attribute is available only when **texton** and **textoff** are set. | 42 43## Events 44 45In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. 46 47 48 49| Name | Parameter | Description | 50| ------ | ------------------------- | --------------------------------------------- | 51| change | { checked: checkedValue } | Triggered when the **checked** state changes. | 52 53## Method 54 55Methods in [Universal Methods](js-components-common-methods.md) are supported. 56 57## Example Code 58 59``` 60<!-- xxx.hml --> 61<div class="container"> 62 <switch showtext="true" texton="On" textoff="Off" checked="true" @change="switchChange"> 63 </switch> 64</div> 65/* xxx.css */ 66.container { 67 display: flex; 68 justify-content: center; 69 align-items: center; 70} 71switch{ 72 texton-color:#002aff; 73 textoff-color:silver; 74 text-padding:20px; 75} 76// xxx.js 77import prompt from '@system.prompt'; 78export default { 79 data: { 80 title: 'World' 81 }, 82 switchChange(e){ 83 console.log(e.checked); 84 if(e.checked){ 85 prompt.showToast({ 86 message: "Switch on." 87 }); 88 }else{ 89 prompt.showToast({ 90 message: "Switch off." 91 }); 92 } 93 } 94} 95``` 96 97
