• 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
18In 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 a child component.
42
43  When **ToggleType** is set to **Button**, only one child component is allowed. If the child component has text set, the text content is displayed on the button.
44
45
46  ```ts
47  Toggle({ type: ToggleType.Button, isOn: false }) {
48    Text('status button')
49    .fontColor('#182431')
50    .fontSize(12)
51  }.width(100)
52  Toggle({ type: ToggleType.Button, isOn: true }) {
53    Text('status button')
54    .fontColor('#182431')
55    .fontSize(12)
56  }.width(100)
57  ```
58
59  ![en-us_image_0000001511900404](figures/en-us_image_0000001511900404.png)
60
61
62## Setting Styles
63
64- Use the **selectedColor** attribute to set the background color of the toggle for when it is turned on.
65
66  ```ts
67  Toggle({ type: ToggleType.Button, isOn: true }) {
68    Text('status button')
69    .fontColor('#182431')
70    .fontSize(12)
71  }.width(100).selectedColor(Color.Pink)
72  Toggle({ type: ToggleType.Checkbox, isOn: true })
73    .selectedColor(Color.Pink)
74  Toggle({ type: ToggleType.Switch, isOn: true })
75    .selectedColor(Color.Pink)
76  ```
77
78  ![en-us_image_0000001563060657](figures/en-us_image_0000001563060657.png)
79
80- 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**.
81
82  ```ts
83  Toggle({ type: ToggleType.Switch, isOn: false })
84    .switchPointColor(Color.Pink)
85  Toggle({ type: ToggleType.Switch, isOn: true })
86    .switchPointColor(Color.Pink)
87  ```
88
89  ![en-us_image_0000001511421232](figures/en-us_image_0000001511421232.png)
90
91
92## Adding Events
93
94The **\<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.
95
96
97```ts
98Toggle({ type: ToggleType.Switch, isOn: false })
99  .onChange((isOn: boolean) => {
100      if(isOn) {
101        // Operation
102      }
103  })
104```
105
106
107## Example Scenario
108
109In this example, the **\<Toggle>** component is used to enable or disable Bluetooth.
110
111
112
113```ts
114// xxx.ets
115import promptAction from '@ohos.promptAction';
116@Entry
117@Component
118struct ToggleExample {
119  @State BOnSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is on.'}
120  @State BOffSt:promptAction.ShowToastOptions = {'message': 'Bluetooth is off.'}
121  build() {
122    Column() {
123      Row() {
124        Text("Bluetooth Mode")
125          .height(50)
126          .fontSize(16)
127      }
128      Row() {
129        Text("Bluetooth")
130          .height(50)
131          .padding({left: 10})
132          .fontSize(16)
133          .textAlign(TextAlign.Start)
134          .backgroundColor(0xFFFFFF)
135        Toggle({ type: ToggleType.Switch })
136          .margin({left: 200, right: 10})
137          .onChange((isOn: boolean) => {
138            if(isOn) {
139              promptAction.showToast(this.BOnSt)
140            } else {
141              promptAction.showToast(this.BOffSt)
142            }
143          })
144      }
145      .backgroundColor(0xFFFFFF)
146    }
147    .padding(10)
148    .backgroundColor(0xDCDCDC)
149    .width('100%')
150    .height('100%')
151  }
152}
153```
154
155
156![en-us_image_0000001511740448](figures/en-us_image_0000001511740448.png)
157