diff --git a/app/ng-framework-modules-category/application/application-events/application-events.component.ts b/app/ng-framework-modules-category/application/application-events/application-events.component.ts index 03e5c869..ccecf2fc 100644 --- a/app/ng-framework-modules-category/application/application-events/application-events.component.ts +++ b/app/ng-framework-modules-category/application/application-events/application-events.component.ts @@ -1,5 +1,4 @@ import { Component } from "@angular/core"; - import { on, ApplicationEventData, @@ -24,7 +23,7 @@ let launchListener, @Component({ moduleId: module.id, - templateUrl: "../app-checking-target/app-checking-target.component.html" + templateUrl: "./application-events.component.html" }) export class ApplicationEventsComponent { public isItemVisible: boolean; diff --git a/app/ng-framework-modules-category/application/application-examples.module.ts b/app/ng-framework-modules-category/application/application-examples.module.ts index 13c0566e..9433333e 100644 --- a/app/ng-framework-modules-category/application/application-examples.module.ts +++ b/app/ng-framework-modules-category/application/application-examples.module.ts @@ -8,6 +8,7 @@ import { AppUsingIosExampleComponent } from "./app-using-ios-specifics/app-using import { ApplicationEventsComponent } from "./application-events/application-events.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; + export const routerConfig = [ { path: "", @@ -48,7 +49,8 @@ export const routerConfig = [ ApplicationExamplesComponent, AppCheckingTargetExampleComponent, AppUsingAndroidExampleComponent, - AppUsingIosExampleComponent + AppUsingIosExampleComponent, + ApplicationEventsComponent ] }) diff --git a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html b/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html index 91dadd72..f5aba8c8 100644 --- a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html +++ b/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html @@ -1,12 +1,10 @@ - - + + + + + - - - - - - + - + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts b/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts index 295e8bc0..99a5418c 100644 --- a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts +++ b/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts @@ -1,6 +1,6 @@ -// >> switch-event-handle-code import { Component } from "@angular/core"; import { Switch } from "tns-core-modules/ui/switch"; +import { EventData } from "tns-core-modules/data/observable"; @Component({ moduleId: module.id, @@ -8,11 +8,11 @@ import { Switch } from "tns-core-modules/ui/switch"; styleUrls: ["./../switch.style.css"], }) export class BasicSwitchComponent { - public firstSwitchState = "OFF"; - public secondSwitchState = "ON"; + firstSwitchState = "OFF"; + secondSwitchState = "ON"; - public onFirstChecked(args) { - let firstSwitch = args.object; + onFirstChecked(args) { + let firstSwitch = args.object as Switch; if (firstSwitch.checked) { this.firstSwitchState = "ON"; } else { @@ -20,13 +20,21 @@ export class BasicSwitchComponent { } } - public onSecondChecked(args) { - let secondSwitch = args.object; - if (secondSwitch.checked) { + // >> switch-event-handle-code + // import { Switch } from "tns-core-modules/ui/switch"; + // import { EventData } from "tns-core-modules/data/observable"; + + onCheckedChange(args: EventData) { + let mySwitch = args.object as Switch; + let isChecked = mySwitch.checked; // boolean + // >> (hide) + if (isChecked) { this.secondSwitchState = "ON"; } else { this.secondSwitchState = "OFF"; } + // << (hide) } + // << switch-event-handle-code } -// << switch-event-handle-code + diff --git a/app/ng-ui-widgets-category/switch/disable-switch/article.md b/app/ng-ui-widgets-category/switch/disable-switch/article.md index d8a78538..f02d0fbd 100644 --- a/app/ng-ui-widgets-category/switch/disable-switch/article.md +++ b/app/ng-ui-widgets-category/switch/disable-switch/article.md @@ -1,3 +1,2 @@ -Set `Switch` in `HTML` code. -Disable `Switch` control via setting `isEnabled` property to false. +Disabling the `Switch` control via setting its `isEnabled` boolean property to `false`. \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html b/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html index dc57cc4f..0da9a063 100644 --- a/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html +++ b/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html @@ -1,17 +1,9 @@ - - - - - - + + + + - - - - + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/styling-switch/article.md b/app/ng-ui-widgets-category/switch/styling-switch/article.md index e9bba91f..bb60d22a 100644 --- a/app/ng-ui-widgets-category/switch/styling-switch/article.md +++ b/app/ng-ui-widgets-category/switch/styling-switch/article.md @@ -1,5 +1,6 @@ -HTML +The styling properties for the `Swtich` control are as follows: +- `color`- Controls the handle color +- `bacxgroundColor`(`background-color` in CSS) - Controls the background color while the switch is in **ON** state. + - `offBackgroundColor` (`off-background-color` in CSS) - Controls the background color while the switch is in **OFF** state. - -CSS \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/styling-switch/style.css b/app/ng-ui-widgets-category/switch/styling-switch/style.css index af69b631..e6de0b6b 100644 --- a/app/ng-ui-widgets-category/switch/styling-switch/style.css +++ b/app/ng-ui-widgets-category/switch/styling-switch/style.css @@ -1,14 +1,14 @@ /* >> switch-style-css */ -.firstSwitchStyle{ - background-color: #FFFF66; -} - .secondSwitchStyle{ - background-color: #CCFFFF; + color: yellow; + background-color: green; + off-background-color: red; } .thirdSwitchStyle{ - opacity: 0.5; - background-color: #8C489F; + opacity: 0.8; + color: darkblue; + background-color: lightseagreen; + off-background-color: orangered; } /* << switch-style-css */ \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html b/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html index 78a26f0c..b007dd1c 100644 --- a/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html +++ b/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html @@ -1,22 +1,13 @@ - - - - - - - - - - - - - - - + + + + + + + + + + + + \ No newline at end of file diff --git a/nsconfig.json b/nsconfig.json new file mode 100644 index 00000000..a6d75472 --- /dev/null +++ b/nsconfig.json @@ -0,0 +1,3 @@ +{ + "useLegacyWorkflow": false +} \ No newline at end of file