• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Toggle
2
3
4The **\<Toggle>** component provides a clickable element in the check box, button, or switch type, typically used to switch between two states. For details, see [Toggle](../reference/arkui-ts/ts-basic-components-toggle.md).
5
6
7## Creating a Toggle
8
9You can create a toggle by calling the following API:
10
11
12
13```ts
14Toggle(options: { type: ToggleType, isOn?: boolean })
15```
16
17
18Creates a toggle. In this API, **ToggleType** indicates the toggle type, which can be **Button**, **Checkbox**, or **Switch**, and **isOn** specifies whether the toggle is turned on. The API can be called in either of the following ways:
19
20
21- Create a toggle that does not contain child components.
22  This can be achieved by calling the API with **ToggleType** set to **Checkbox** or **Switch**.
23
24
25  ```ts
26  Toggle({ type: ToggleType.Checkbox, isOn: false })
27  Toggle({ type: ToggleType.Checkbox, isOn: true })
28  ```
29
30  ![en-us_image_0000001562940485](figures/en-us_image_0000001562940485.png)
31
32
33  ```ts
34  Toggle({ type: ToggleType.Switch, isOn: false })
35  Toggle({ type: ToggleType.Switch, isOn: true })
36  ```
37
38  ![en-us_image_0000001511421228](figures/en-us_image_0000001511421228.png)
39
40
41- Create a toggle that contains child components.
42  This can be achieved by calling the API with **ToggleType** set to **Button**. If the child component has text set, the text content is displayed inside the button.
43
44
45  ```ts
46  Toggle({ type: ToggleType.Button, isOn: false }) {
47    Text('status button')
48    .fontColor('#182431')
49    .fontSize(12)
50  }.width(100)
51  Toggle({ type: ToggleType.Button, isOn: true }) {
52    Text('status button')
53    .fontColor('#182431')
54    .fontSize(12)
55  }.width(100)
56  ```
57
58  ![en-us_image_0000001511900404](figures/en-us_image_0000001511900404.png)
59
60
61## Setting Styles
62
63- Use the **selectedColor** attribute to set the background color of the toggle for when it is turned on.
64
65  ```ts
66  Toggle({ type: ToggleType.Button, isOn: true }) {
67    Text('status button')
68    .fontColor('#182431')
69    .fontSize(12)
70  }.width(100).selectedColor(Color.Pink)
71  Toggle({ type: ToggleType.Checkbox, isOn: true })
72    .selectedColor(Color.Pink)
73  Toggle({ type: ToggleType.Switch, isOn: true })
74    .selectedColor(Color.Pink)
75  ```
76
77  ![en-us_image_0000001563060657](figures/en-us_image_0000001563060657.png)
78
79- Use the **switchPointColor** attribute to set the color of the circular slider. This attribute is valid only when **type** of the toggle is set to **ToggleType.Switch**.
80
81  ```ts
82  Toggle({ type: ToggleType.Switch, isOn: false })
83    .switchPointColor(Color.Pink)
84  Toggle({ type: ToggleType.Switch, isOn: true })
85    .switchPointColor(Color.Pink)
86  ```
87
88  ![en-us_image_0000001511421232](figures/en-us_image_0000001511421232.png)
89
90
91## Adding Events
92
93The **\<Toggle>** component supports the [universal events](../reference/arkui-ts/ts-universal-events-click.md). In addition, it can be bound to the **onChange** event so that it responds with custom behavior after being turned on or off.
94
95
96```ts
97Toggle({ type: ToggleType.Switch, isOn: false })
98  .onChange((isOn: boolean) => {
99      if(isOn) {
100        // Operation
101      }
102  })
103```
104
105
106## Example Scenario
107
108In this example, the **\<Toggle>** component is used to enable or disable Bluetooth.
109
110
111
112```ts
113// xxx.ets
114import promptAction from '@ohos.promptAction';
115@Entry
116@Component
117struct ToggleExample {
118  build() {
119    Column() {
120      Row() {
121        Text("Bluetooth Mode")
122        .height(50)
123        .fontSize(16)
124      }
125      Row() {
126        Text("Bluetooth")
127          .height(50)
128          .padding({left: 10})
129          .fontSize(16)
130          .textAlign(TextAlign.Start)
131          .backgroundColor(0xFFFFFF)
132        Toggle({ type: ToggleType.Switch })
133          .margin({left: 200, right: 10})
134          .onChange((isOn: boolean) => {
135            if(isOn) {
136              promptAction.showToast({ message: 'Bluetooth is on.' })
137            } else {
138              promptAction.showToast({ message: 'Bluetooth is off.' })
139            }
140          })
141      }
142      .backgroundColor(0xFFFFFF)
143    }
144    .padding(10)
145    .backgroundColor(0xDCDCDC)
146    .width('100%')
147    .height('100%')
148  }
149}
150```
151
152
153![en-us_image_0000001511740448](figures/en-us_image_0000001511740448.png)
154