Skip to content

Commit 338f9b7

Browse files
rigor789rigor789
committed
docs: cleanup Switch
1 parent 99ae841 commit 338f9b7

File tree

5 files changed

+37
-124
lines changed

5 files changed

+37
-124
lines changed

‎content/screenshots/android/Switch.png

19.4 KB
Loading

‎content/screenshots/ios/Switch.png

60.2 KB
Loading

‎content/ui/switch.md

Lines changed: 27 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,72 @@
11
---
22
title: Switch
3+
description: UI component for toggling state on or off.
4+
contributors:
5+
- rigor789
6+
- Ombuweb
37
---
48

5-
<!-- TODO: Add flvaors& Vue checkedChange event listener-->
6-
79
`<Switch>` is a UI component that lets users toggle between two states.
810

9-
The default state is `false` or OFF.
10-
11-
---
12-
1311
<DeviceFrame type="ios">
14-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/Switch.png"/>
12+
<img src="../screenshots/ios/Switch.png"/>
1513
</DeviceFrame>
1614
<DeviceFrame type="android">
17-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/Switch.png" />
15+
<img src="../screenshots/android/Switch.png"/>
1816
</DeviceFrame>
1917

20-
### Simple Switch
21-
22-
To be notified when the Switch state changes, listen for the `checkedChange` event.
23-
24-
<!-- /// flavor plain -->
25-
26-
```xml
27-
<Switch checked="{{ checked }}" loaded="{{ onSwitchLoaded }}" />
28-
```
29-
30-
```ts
31-
export class HelloWorldModel extends Observable {
32-
checked = true
33-
constructor() {
34-
super()
35-
}
36-
37-
onSwitchLoaded(args: EventData) {
38-
const switchComponent = args.object as Switch
39-
40-
switchComponent.on('checkedChange', (args: PropertyChangeData) => {
41-
console.log('checkedChange: ', args.value, 'Old: ' + args.oldValue)
42-
})
43-
}
44-
}
45-
```
46-
47-
<!-- ///
48-
49-
/// flavor angular
18+
<<< @/../examples/src/ui/Switch/template.xml#example
5019

51-
```xml
52-
<Switch checked="true" (checkedChange)="onCheckedChange($event)"> </Switch>
53-
```
54-
55-
```ts
56-
import { Component } from '@angular/core'
57-
import { EventData, Switch } from '@nativescript/core'
58-
59-
@Component({
60-
moduleId: module.id,
61-
templateUrl: './usage.component.html'
62-
})
63-
export class BasicSwitchComponent {
64-
onCheckedChange(args: EventData) {
65-
const sw = args.object as Switch
66-
const isChecked = sw.checked // boolean
67-
}
68-
}
69-
```
20+
## Examples
7021

71-
///
72-
73-
/// flavor vue
74-
75-
```xml
76-
<Switch checked="true" @checkedChange="onCheckedChange"/>
77-
```
78-
```ts
79-
onCheckedChange(args: PropertyChangeData) {
80-
81-
console.log(args.value)
82-
}
83-
```
84-
`<Switch>`provides two-way data binding using `v-model`.
22+
### Styling a Switch
8523

8624
```xml
87-
<Switch v-model="itemEnabled" />
88-
```
89-
90-
///
91-
92-
/// flavor svelte
93-
94-
```tsx
95-
<switch checked="{true}" on:checkedChange="{onCheckedChange}" />
96-
```
97-
98-
`<switch>`provides two-way data binding for `checked`.
99-
100-
```tsx
101-
<switch bind:checked="{switchEnabled}" />
102-
```
103-
104-
///
105-
106-
/// flavor react
107-
108-
```tsx
109-
<switch checked={true} />
110-
```
111-
112-
/// -->
113-
114-
### Styling Switch
115-
116-
```xml
117-
<Switch checked="true" color="#BFCDAC" backgroundColor="green" offBackgroundColor="#DC493D"/>
25+
<Switch checked="true"
26+
color="#BFCDAC"
27+
backgroundColor="green"
28+
offBackgroundColor="#DC493D"
29+
/>
11830
```
11931

12032
## Props
12133

12234
### checked
12335

124-
```xml
125-
<Switch checked="true"/>
126-
```
127-
12836
```ts
129-
switchComponent.checked = false
37+
checked: boolean
13038
```
13139

132-
Gets or sets the state value of the switch.
40+
Gets or sets the state switch.
13341

134-
---
42+
Defaults to `false`.
13543

13644
### offBackgroundColor
13745

138-
```xml
139-
<Switch offBackgroundColor="#DC493D"/>
46+
```ts
47+
offBackgroundColor: Color
14048
```
14149

142-
Gets or sets the off-state color.
50+
Gets or sets the off-state background color.
14351

144-
---
52+
See [Color](/api/class/Color).
14553

14654
### ...Inherited
14755

148-
For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/switch).
56+
For additional inherited properties, refer to the [API Reference](/api/class/Switch).
14957

15058
## Events
15159

15260
### checkedChange
15361

15462
```ts
155-
onSwitchLoaded(args: EventData){
156-
const switchComponent = args.object as Switch;
157-
158-
switchComponent.on("checkedChange", (args: PropertyChangeData)=>{
159-
160-
console.log("checkedChange: ", args.value, "Old: "+args.oldValue)
161-
162-
})
163-
}
63+
on('checkedChange', (args: PropertyChangeData) => {
64+
const switch = args.object as Switch
65+
console.log('Switch checked:', args.value)
66+
})
16467
```
16568

166-
Emitted when the switch state changes. See [PropertyChangeData Interface](https://docs.nativescript.org/api-reference/interfaces/propertychangedata) for the event data.
69+
See [PropertyChangeData](/api/interface/PropertyChangeData).
16770

16871
## Native component
16972

‎examples/flows/screenshots.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ output.screenshots = [
1616
'SearchBar',
1717
'SegmentedBar',
1818
'Slider',
19+
'Switch',
1920
]

‎examples/src/ui/Switch/template.xml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Page>
2+
<GridLayout padding="8">
3+
<ContentView verticalAlignment="center" horizontalAlignment="center">
4+
<!-- #region example -->
5+
<Switch checked="true" />
6+
<!-- #endregion example -->
7+
</ContentView>
8+
</GridLayout>
9+
</Page>

0 commit comments

Comments
 (0)