Skip to content

Commit 9964f16

Browse files
NickIlievNickIliev
authored
Merge pull request #375 from NativeScript/niliev/switch
docs: offBackgroundColor new property of Switch
2 parents 8532d5d + bb2358a commit 9964f16

File tree

10 files changed

+62
-69
lines changed

10 files changed

+62
-69
lines changed

‎app/ng-framework-modules-category/application/application-events/application-events.component.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component } from "@angular/core";
2-
32
import {
43
on,
54
ApplicationEventData,
@@ -24,7 +23,7 @@ let launchListener,
2423

2524
@Component({
2625
moduleId: module.id,
27-
templateUrl: "../app-checking-target/app-checking-target.component.html"
26+
templateUrl: "./application-events.component.html"
2827
})
2928
export class ApplicationEventsComponent {
3029
public isItemVisible: boolean;

‎app/ng-framework-modules-category/application/application-examples.module.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AppUsingIosExampleComponent } from "./app-using-ios-specifics/app-using
88
import { ApplicationEventsComponent } from "./application-events/application-events.component";
99
import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
1010

11+
1112
export const routerConfig = [
1213
{
1314
path: "",
@@ -48,7 +49,8 @@ export const routerConfig = [
4849
ApplicationExamplesComponent,
4950
AppCheckingTargetExampleComponent,
5051
AppUsingAndroidExampleComponent,
51-
AppUsingIosExampleComponent
52+
AppUsingIosExampleComponent,
53+
ApplicationEventsComponent
5254
]
5355
})
5456

‎app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<StackLayout sdkExampleTitle sdkToggleNavButton>
2-
<StackLayout class="example-container">
1+
<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
2+
<GridLayout rows="auto auto" columns="* *" class="m-5">
3+
<Label class="h3 m-15" [text]="firstSwitchState" textWrap="true" row="0" col="0"></Label>
4+
<Switch class="m-15" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch>
5+
<Label class="h3 m-15" [text]="secondSwitchState" textWrap="true" row="1" col="0"></Label>
36
<!-- >> switch-binding-html -->
4-
<GridLayout rows="auto auto" columns="* *" class="m-5">
5-
<Label class="h3 m-15" [text]="firstSwitchState" textWrap="true" row="0" col="0"></Label>
6-
<Switch class="m-15" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch>
7-
<Label class="h3 m-15" [text]="secondSwitchState" textWrap="true" row="1" col="0"></Label>
8-
<Switch class="m-15" checked="true" (checkedChange)="onSecondChecked($event)" row="1" col="1"></Switch>
9-
</GridLayout>
7+
<Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="1"></Switch>
108
<!-- << switch-binding-html -->
11-
</StackLayout>
9+
</GridLayout>
1210
</StackLayout>

‎app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
// >> switch-event-handle-code
21
import { Component } from "@angular/core";
32
import { Switch } from "tns-core-modules/ui/switch";
3+
import { EventData } from "tns-core-modules/data/observable";
44

55
@Component({
66
moduleId: module.id,
77
templateUrl: "./basic-switch.component.html",
88
styleUrls: ["./../switch.style.css"],
99
})
1010
export class BasicSwitchComponent {
11-
public firstSwitchState = "OFF";
12-
public secondSwitchState = "ON";
11+
firstSwitchState = "OFF";
12+
secondSwitchState = "ON";
1313

14-
public onFirstChecked(args) {
15-
let firstSwitch = <Switch>args.object;
14+
onFirstChecked(args) {
15+
let firstSwitch = args.object as Switch;
1616
if (firstSwitch.checked) {
1717
this.firstSwitchState = "ON";
1818
} else {
1919
this.firstSwitchState = "OFF";
2020
}
2121
}
2222

23-
public onSecondChecked(args) {
24-
let secondSwitch = <Switch>args.object;
25-
if (secondSwitch.checked) {
23+
// >> switch-event-handle-code
24+
// import { Switch } from "tns-core-modules/ui/switch";
25+
// import { EventData } from "tns-core-modules/data/observable";
26+
27+
onCheckedChange(args: EventData) {
28+
let mySwitch = args.object as Switch;
29+
let isChecked = mySwitch.checked; // boolean
30+
// >> (hide)
31+
if (isChecked) {
2632
this.secondSwitchState = "ON";
2733
} else {
2834
this.secondSwitchState = "OFF";
2935
}
36+
// << (hide)
3037
}
38+
// << switch-event-handle-code
3139
}
32-
// << switch-event-handle-code
40+

‎app/ng-ui-widgets-category/switch/disable-switch/article.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
Set `Switch` in `HTML` code.
2-
Disable `Switch` control via setting `isEnabled` property to false.
1+
Disabling the `Switch` control via setting its `isEnabled` boolean property to `false`.
32
<snippet id='disable-switch'/>

‎app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
1-
<StackLayout sdkExampleTitle sdkToggleNavButton>
2-
<StackLayout class="example-container">
3-
<!-- >> disable-switch -->
4-
<GridLayout rows="auto auto" columns="* *" class="m-5">
5-
<Label row="0" col="0"
6-
[text]="switch.isEnabled ? 'enabled' : 'disabled'"
7-
textWrap="true" class="h3 m-15"></Label>
8-
<Switch #switch class="m-15" row="0" col="1"></Switch>
1+
<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
2+
<Label [text]="switch.isEnabled ? 'enabled' : 'disabled'" textWrap="true" class="h3 m-15"></Label>
3+
<!-- >> disable-switch -->
4+
<Switch #switch isEnabled="true" class="m-15"></Switch>
95

10-
<Button row="3" col="0" colSpan="2"
11-
[text]="switch.isEnabled ? 'Disable switch' : 'Enable switch'"
12-
(tap)="switch.isEnabled = !switch.isEnabled"
13-
horizontalAlignment="stretch" class="btn btn-primary btn-active"></Button>
14-
</GridLayout>
15-
<!-- << disable-switch -->
16-
</StackLayout>
6+
<Button [text]="switch.isEnabled ? 'Disable switch' : 'Enable switch'" (tap)="switch.isEnabled = !switch.isEnabled"
7+
horizontalAlignment="stretch" class="btn btn-primary btn-active"></Button>
8+
<!-- << disable-switch -->
179
</StackLayout>

‎app/ng-ui-widgets-category/switch/styling-switch/article.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
HTML
1+
The styling properties for the `Swtich` control are as follows:
2+
- `color`- Controls the handle color
3+
- `bacxgroundColor`(`background-color` in CSS) - Controls the background color while the switch is in **ON** state.
4+
- `offBackgroundColor` (`off-background-color` in CSS) - Controls the background color while the switch is in **OFF** state.
25
<snippet id='switch-styling-html'/>
3-
4-
CSS
56
<snippet id='switch-style-css'/>

‎app/ng-ui-widgets-category/switch/styling-switch/style.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/* >> switch-style-css */
2-
.firstSwitchStyle{
3-
background-color: #FFFF66;
4-
}
5-
62
.secondSwitchStyle{
7-
background-color: #CCFFFF;
3+
color: yellow;
4+
background-color: green;
5+
off-background-color: red;
86
}
97

108
.thirdSwitchStyle{
11-
opacity: 0.5;
12-
background-color: #8C489F;
9+
opacity: 0.8;
10+
color: darkblue;
11+
background-color: lightseagreen;
12+
off-background-color: orangered;
1313
}
1414
/* << switch-style-css */

‎app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
1-
<StackLayout sdkExampleTitle sdkToggleNavButton>
2-
<StackLayout class="example-container">
3-
<!-- >> switch-styling-html -->
4-
<GridLayout rows="auto auto auto" columns="* auto" class="m-5">
5-
<Label class="h3 m-15" [text]="switch1.checked" textWrap="true" row="0" col="0"></Label>
6-
<Switch #switch1 class="m-15 firstSwitchStyle" checked="true"
7-
(checkedChange)="switch1.checked"
8-
row="0" col="1"></Switch>
9-
10-
<Label class="h3 m-15" [text]="switch2.checked" textWrap="true" row="1" col="0"></Label>
11-
<Switch #switch2 class="m-15 secondSwitchStyle" checked="false"
12-
(checkedChange)="switch2.checked"
13-
row="1" col="1"></Switch>
14-
15-
<Label class="h3 m-15" [text]="switch3.checked" textWrap="true" row="2" col="0"></Label>
16-
<Switch #switch3 class="m-15 thirdSwitchStyle" checked="true"
17-
(checkedChange)="switch3.checked"
18-
row="2" col="1"></Switch>
19-
</GridLayout>
20-
<!-- << switch-styling-html -->
21-
</StackLayout>
1+
<StackLayout sdkExampleTitle sdkToggleNavButton class="example-container">
2+
<!-- >> switch-styling-html -->
3+
<!-- Styling via inline properties ---->
4+
<Switch color="yellow" backgroundColor="green" offBackgroundColor="red">
5+
</Switch>
6+
<!-- Styling via CSS class (see CSS file) ---->
7+
<Switch class="m-15 secondSwitchStyle" checked="true">
8+
</Switch>
9+
<!-- Applying style & opacity via CSS class ---->
10+
<Switch class="m-15 thirdSwitchStyle" checked="true">
11+
</Switch>
12+
<!-- << switch-styling-html -->
2213
</StackLayout>

‎nsconfig.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"useLegacyWorkflow": false
3+
}

0 commit comments

Comments
 (0)