From 594ee45f38362da25137f8cbdef0a7516c3258d3 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 13:00:42 +0300 Subject: [PATCH 1/8] docs: SearchBar revamp --- app/ng-ui-widgets-category/htmlview/end.md | 1 - .../search-bar/basic-search-bar/article.md | 8 --- .../basic-search-bar.component.html | 8 --- .../basic-search-bar.component.ts | 22 ------- .../search-bar/clear-search-bar/article.md | 6 -- .../clear-search-bar.component.html | 14 ----- .../clear-search-bar.component.ts | 58 ------------------- app/ng-ui-widgets-category/search-bar/end.md | 29 ++++++++++ .../search-bar/metadata.md | 1 + .../search-bar/overview.md | 4 +- .../search-bar/search-bar-binding/article.md | 4 -- .../search-bar-binding.component.html | 7 --- .../search-bar-binding.component.ts | 32 ---------- .../search-bar-examples.component.ts | 5 +- .../search-bar/search-bar-examples.module.ts | 27 ++++----- .../search-bar/styling/article.md | 1 + .../search-bar/styling/styling.component.html | 11 ++++ .../search-bar/styling/styling.component.ts | 9 +++ .../search-bar/usage/article.md | 4 ++ .../search-bar/usage/usage.component.html | 8 +++ .../search-bar/usage/usage.component.ts | 27 +++++++++ 21 files changed, 104 insertions(+), 182 deletions(-) delete mode 100644 app/ng-ui-widgets-category/search-bar/basic-search-bar/article.md delete mode 100644 app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.html delete mode 100644 app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.ts delete mode 100644 app/ng-ui-widgets-category/search-bar/clear-search-bar/article.md delete mode 100644 app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.html delete mode 100644 app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.ts delete mode 100644 app/ng-ui-widgets-category/search-bar/search-bar-binding/article.md delete mode 100644 app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.html delete mode 100644 app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.ts create mode 100644 app/ng-ui-widgets-category/search-bar/styling/article.md create mode 100644 app/ng-ui-widgets-category/search-bar/styling/styling.component.html create mode 100644 app/ng-ui-widgets-category/search-bar/styling/styling.component.ts create mode 100644 app/ng-ui-widgets-category/search-bar/usage/article.md create mode 100644 app/ng-ui-widgets-category/search-bar/usage/usage.component.html create mode 100644 app/ng-ui-widgets-category/search-bar/usage/usage.component.ts diff --git a/app/ng-ui-widgets-category/htmlview/end.md b/app/ng-ui-widgets-category/htmlview/end.md index 0bfc8d9d..ffddfb5c 100644 --- a/app/ng-ui-widgets-category/htmlview/end.md +++ b/app/ng-ui-widgets-category/htmlview/end.md @@ -18,7 +18,6 @@ | [HtmlView](https://docs.nativescript.org/api-reference/modules/_ui_html_view_) | `Module` | | [HtmlView](https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview) | `Class` | - ## Native Component | Android | iOS | diff --git a/app/ng-ui-widgets-category/search-bar/basic-search-bar/article.md b/app/ng-ui-widgets-category/search-bar/basic-search-bar/article.md deleted file mode 100644 index 4c05496f..00000000 --- a/app/ng-ui-widgets-category/search-bar/basic-search-bar/article.md +++ /dev/null @@ -1,8 +0,0 @@ - -The example shows how to create SerachBar component via HTML and how to handle `submit` and `textChange` events. The SearchBar's text will be printed in the console for both `textChange` and `submit` events. - -HTML - - -Handle SearchBar `submit` event. - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.html b/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.html deleted file mode 100644 index 249080d3..00000000 --- a/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.html +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.ts b/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.ts deleted file mode 100644 index 98986e5d..00000000 --- a/app/ng-ui-widgets-category/search-bar/basic-search-bar/basic-search-bar.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -// >> search-bar-submit-event-code -import { Component } from "@angular/core"; -import { SearchBar } from "tns-core-modules/ui/search-bar"; - -@Component({ - moduleId: module.id, - templateUrl: "./basic-search-bar.component.html" -}) -export class BasicSearchBarComponent { - public searchPhrase: string; - - public onSubmit(args) { - let searchBar = args.object; - alert("You are searching for " + searchBar.text); - } - - public onTextChanged(args) { - let searchBar = args.object; - console.log("SearchBar text changed! New value: " + searchBar.text); - } -} -// << search-bar-submit-event-code diff --git a/app/ng-ui-widgets-category/search-bar/clear-search-bar/article.md b/app/ng-ui-widgets-category/search-bar/clear-search-bar/article.md deleted file mode 100644 index 0eee408e..00000000 --- a/app/ng-ui-widgets-category/search-bar/clear-search-bar/article.md +++ /dev/null @@ -1,6 +0,0 @@ -The example shows, how to handle SearchBar's clear event, which will be executed when the SearchBar's text is removed. -HTML - - -Handle SearchBar `submit` event. - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.html b/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.html deleted file mode 100644 index 6a8dc314..00000000 --- a/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.ts b/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.ts deleted file mode 100644 index b9635c2e..00000000 --- a/app/ng-ui-widgets-category/search-bar/clear-search-bar/clear-search-bar.component.ts +++ /dev/null @@ -1,58 +0,0 @@ - -// >> clear-search-bar-submit -import { Component, ChangeDetectionStrategy } from "@angular/core"; -import { SearchBar } from "tns-core-modules/ui/search-bar"; -import { ObservableArray } from "tns-core-modules/data/observable-array"; - -class DataItem { - constructor(public name: string) { } -} - -@Component({ - moduleId: module.id, - templateUrl: "./clear-search-bar.component.html", - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class ClearSearchBarComponent { - private arrayItems: Array = []; - public myItems: ObservableArray = new ObservableArray(); - - constructor() { - this.arrayItems.push(new DataItem("United States")); - this.arrayItems.push(new DataItem("Bulgaria")); - this.arrayItems.push(new DataItem("Germany")); - this.arrayItems.push(new DataItem("Denmark")); - this.arrayItems.push(new DataItem("India")); - this.arrayItems.push(new DataItem("Spain")); - this.arrayItems.push(new DataItem("Italy")); - - this.myItems = new ObservableArray(this.arrayItems); - } - - public onSubmit(args) { - let searchBar = args.object; - let searchValue = searchBar.text.toLowerCase(); - - this.myItems = new ObservableArray(); - if (searchValue !== "") { - for (let i = 0; i < this.arrayItems.length; i++) { - if (this.arrayItems[i].name.toLowerCase().indexOf(searchValue) !== -1) { - this.myItems.push(this.arrayItems[i]); - } - } - } - } - - public onClear(args) { - let searchBar = args.object; - searchBar.text = ""; - searchBar.hint = "Search for a country and press enter"; - - this.myItems = new ObservableArray(); - this.arrayItems.forEach(item => { - this.myItems.push(item); - }); - } - -} -// << clear-search-bar-submit diff --git a/app/ng-ui-widgets-category/search-bar/end.md b/app/ng-ui-widgets-category/search-bar/end.md index e69de29b..a07f5b33 100644 --- a/app/ng-ui-widgets-category/search-bar/end.md +++ b/app/ng-ui-widgets-category/search-bar/end.md @@ -0,0 +1,29 @@ +## Properties + +| Name | Type | Description | +|----------|---------|----------------| +| `hint` | `string` | Gets or sets the text of the search bar text field hint/placeholder. | +| `text` | `string` | Gets or sets a search bar text. | +| `textFieldBackgroundColor` | `Color` | Gets or sets the TextField background color of the SearchBar component. | +| `textFieldHintColor` | `Color` | Gets or sets the TextField Hint color of the SearchBar component. | + +## Events + +| Name | Description | +|----------|----------------| +| `clear` | Emitted when the search is cleared (via the clear button). | +| `submit` | Emitted when the serach term is submitted. | + + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/search-bar](https://docs.nativescript.org/api-reference/modules/_ui_search_bar_) | `Module` | +| [SearchBar](https://docs.nativescript.org/api-reference/classes/_ui_search_bar_.searchbar) | `Class` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| +| [android.widget.SearchView](https://developer.android.com/reference/android/widget/SearchView) | [UISearchBar](https://developer.apple.com/documentation/uikit/uisearchbar) | diff --git a/app/ng-ui-widgets-category/search-bar/metadata.md b/app/ng-ui-widgets-category/search-bar/metadata.md index f53f1bd9..9339f176 100644 --- a/app/ng-ui-widgets-category/search-bar/metadata.md +++ b/app/ng-ui-widgets-category/search-bar/metadata.md @@ -4,3 +4,4 @@ description: SearchBar is a component, which represents `UISearchBar` component position: 37 slug: search-bar-ng --- +example-order: usage, styling \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/overview.md b/app/ng-ui-widgets-category/search-bar/overview.md index f012f818..dd0fcd25 100644 --- a/app/ng-ui-widgets-category/search-bar/overview.md +++ b/app/ng-ui-widgets-category/search-bar/overview.md @@ -1,2 +1,2 @@ -The SearchBar module represents a UI component similar to `UISearchBar` in iOS and `SearchView` for Android, both of which allow you to to create a simple filter for the the content in the app. -This module gives you the simple way to handle a `submit` event and a `clear` event. +The `SearchBar` module represents a UI component similar to `UISearchBar` in iOS and ` android.widget.SearchView` for Android, both of which allow you to to create a simple filter for the the content in the app. +This component provides `hint` and `text` properties and `submit` and `clear` events. diff --git a/app/ng-ui-widgets-category/search-bar/search-bar-binding/article.md b/app/ng-ui-widgets-category/search-bar/search-bar-binding/article.md deleted file mode 100644 index d3d64997..00000000 --- a/app/ng-ui-widgets-category/search-bar/search-bar-binding/article.md +++ /dev/null @@ -1,4 +0,0 @@ -The example demonstrates, how to setup the available component's events (`loaded`, `textChange`, `submit`), while using DataBinding in NativeScript Angular. - -HTML - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.html b/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.html deleted file mode 100644 index cb50c5f2..00000000 --- a/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.ts b/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.ts deleted file mode 100644 index dba7be5b..00000000 --- a/app/ng-ui-widgets-category/search-bar/search-bar-binding/search-bar-binding.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component } from "@angular/core"; -import { SearchBar } from "tns-core-modules/ui/search-bar"; -import { isAndroid } from "tns-core-modules/platform"; - -@Component({ - moduleId: module.id, - templateUrl: "./search-bar-binding.component.html" -}) -export class SearchBarBindingComponent { - searchPhrase: string = ""; - - public searchBarLoaded(args) { - let searchBar = args.object; - searchBar.dismissSoftInput(); - - if (isAndroid) { - searchBar.android.clearFocus(); - } - - searchBar.text = ""; - } - - public onTextChange(args) { - let searchBar = args.object; - this.searchPhrase = "Current search query: " + searchBar.text; - } - - public onSubmit(args) { - let searchBar = args.object; - this.searchPhrase = "Submited search query: " + searchBar.text; - } -} diff --git a/app/ng-ui-widgets-category/search-bar/search-bar-examples.component.ts b/app/ng-ui-widgets-category/search-bar/search-bar-examples.component.ts index 2577bd49..9173b6e1 100644 --- a/app/ng-ui-widgets-category/search-bar/search-bar-examples.component.ts +++ b/app/ng-ui-widgets-category/search-bar/search-bar-examples.component.ts @@ -2,9 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Basic SearchBar", "/search-bar/basic"), - new Link("Clear SearchBar", "/search-bar/clear"), - new Link("SearchBar binding", "/search-bar/binding") + new Link("Usage", "/search-bar/usage"), + new Link("Styling", "/search-bar/styling") ]; @Component({ diff --git a/app/ng-ui-widgets-category/search-bar/search-bar-examples.module.ts b/app/ng-ui-widgets-category/search-bar/search-bar-examples.module.ts index 81b94690..3ad47617 100644 --- a/app/ng-ui-widgets-category/search-bar/search-bar-examples.module.ts +++ b/app/ng-ui-widgets-category/search-bar/search-bar-examples.module.ts @@ -2,9 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { SearchBarExamplesComponent } from "./search-bar-examples.component"; -import { BasicSearchBarComponent } from "./basic-search-bar/basic-search-bar.component"; -import { ClearSearchBarComponent } from "./clear-search-bar/clear-search-bar.component"; -import { SearchBarBindingComponent } from "./search-bar-binding/search-bar-binding.component"; +import { UsageComponent } from "./usage/usage.component"; +import { StylingComponent } from "./styling/styling.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -13,19 +12,14 @@ export const routerConfig = [ component: SearchBarExamplesComponent }, { - path: "basic", - component: BasicSearchBarComponent, - data: { title: "Basic SearchBar" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } }, { - path: "clear", - component: ClearSearchBarComponent, - data: { title: "Clear SearchBar" } - }, - { - path: "binding", - component: SearchBarBindingComponent, - data: { title: "SearchBar property binding" } + path: "styling", + component: StylingComponent, + data: { title: "Styling" } } ]; @@ -39,9 +33,8 @@ export const routerConfig = [ ], declarations: [ SearchBarExamplesComponent, - BasicSearchBarComponent, - ClearSearchBarComponent, - SearchBarBindingComponent + UsageComponent, + StylingComponent ] }) diff --git a/app/ng-ui-widgets-category/search-bar/styling/article.md b/app/ng-ui-widgets-category/search-bar/styling/article.md new file mode 100644 index 00000000..8098a91d --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/styling/article.md @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/styling/styling.component.html b/app/ng-ui-widgets-category/search-bar/styling/styling.component.html new file mode 100644 index 00000000..b29f9367 --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/styling/styling.component.html @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/app/ng-ui-widgets-category/search-bar/styling/styling.component.ts b/app/ng-ui-widgets-category/search-bar/styling/styling.component.ts new file mode 100644 index 00000000..910d79ed --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/styling/styling.component.ts @@ -0,0 +1,9 @@ +import { Component } from "@angular/core"; + +@Component({ + moduleId: module.id, + templateUrl: "./styling.component.html" +}) +export class StylingComponent { + +} diff --git a/app/ng-ui-widgets-category/search-bar/usage/article.md b/app/ng-ui-widgets-category/search-bar/usage/article.md new file mode 100644 index 00000000..6020b9bb --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/usage/article.md @@ -0,0 +1,4 @@ +Using `SearchBar` component with `hint` and `text` with Angular binding. The user input can be handled by using the `submit`, `textChange` and `clear` events. + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/usage/usage.component.html b/app/ng-ui-widgets-category/search-bar/usage/usage.component.html new file mode 100644 index 00000000..0feb8001 --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/usage/usage.component.html @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/search-bar/usage/usage.component.ts b/app/ng-ui-widgets-category/search-bar/usage/usage.component.ts new file mode 100644 index 00000000..0e070ec2 --- /dev/null +++ b/app/ng-ui-widgets-category/search-bar/usage/usage.component.ts @@ -0,0 +1,27 @@ +// >> search-bar-submit-event-code +import { Component } from "@angular/core"; +import { SearchBar } from "tns-core-modules/ui/search-bar"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class UsageComponent { + searchPhrase: string; + + onSubmit(args) { + const searchBar = args.object as SearchBar; + console.log(`Searching for ${searchBar.text}`); + } + + onTextChanged(args) { + const searchBar = args.object as SearchBar; + console.log(`Input changed! New value: ${searchBar.text}`); + } + + onClear(args) { + const searchBar = args.object as SearchBar; + console.log(`Clear event raised`); + } +} +// << search-bar-submit-event-code From 87e2b7690546e191db8b94838dc5881bb33a3803 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 14:00:18 +0300 Subject: [PATCH 2/8] docs: SegmentedBar revamp --- .../basic-segmented-bar.component.html | 6 ---- .../basic-segmented-bar.component.ts | 28 ------------------ .../segmented-bar/end.md | 29 ++++++++++++++++--- .../segmented-bar/metadata.md | 1 + .../segmented-bar/overview.md | 9 ++---- .../segmented-bar-examples.component.ts | 4 +-- .../segmented-bar-examples.module.ts | 12 ++++---- .../segmented-bar-views/article.md | 5 ---- .../segmented-bar-views.component.html | 16 ---------- .../segmented-bar-views.component.ts | 29 ------------------- .../segmented-bar/styling/article.md | 3 ++ .../styling.component.css} | 0 .../styling/styling.component.html | 9 ++++++ .../styling/styling.component.ts | 19 ++++++++++++ .../{basic-segmented-bar => usage}/article.md | 3 -- .../segmented-bar/usage/usage.component.html | 8 +++++ .../segmented-bar/usage/usage.component.ts | 27 +++++++++++++++++ 17 files changed, 102 insertions(+), 106 deletions(-) delete mode 100644 app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.html delete mode 100644 app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.ts delete mode 100644 app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/article.md delete mode 100644 app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.html delete mode 100644 app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.ts create mode 100644 app/ng-ui-widgets-category/segmented-bar/styling/article.md rename app/ng-ui-widgets-category/segmented-bar/{segmented-bar-views/style.css => styling/styling.component.css} (100%) create mode 100644 app/ng-ui-widgets-category/segmented-bar/styling/styling.component.html create mode 100644 app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts rename app/ng-ui-widgets-category/segmented-bar/{basic-segmented-bar => usage}/article.md (82%) create mode 100644 app/ng-ui-widgets-category/segmented-bar/usage/usage.component.html create mode 100644 app/ng-ui-widgets-category/segmented-bar/usage/usage.component.ts diff --git a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.html b/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.html deleted file mode 100644 index 0cadfe01..00000000 --- a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.ts b/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.ts deleted file mode 100644 index e91b26c7..00000000 --- a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/basic-segmented-bar.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// >> add-segmentedbar-items -import { Component, ChangeDetectionStrategy } from "@angular/core"; -import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar"; - -@Component({ - moduleId: module.id, - templateUrl: "./basic-segmented-bar.component.html", - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class BasicSegmentedBarComponent { - public myItems: Array; - public prop: string = "Item 1"; - - constructor() { - this.myItems = []; - for (let i = 1; i < 5; i++) { - const item = new SegmentedBarItem(); - item.title = "Tab " + i; - this.myItems.push(item); - } - } - - public onSelectedIndexChange(args) { - let segmentedBar = args.object; - this.prop = "Item" + (segmentedBar.selectedIndex + 1); - } -} -// << add-segmentedbar-items diff --git a/app/ng-ui-widgets-category/segmented-bar/end.md b/app/ng-ui-widgets-category/segmented-bar/end.md index 219ca064..c1407213 100644 --- a/app/ng-ui-widgets-category/segmented-bar/end.md +++ b/app/ng-ui-widgets-category/segmented-bar/end.md @@ -1,8 +1,29 @@ +## Properties -**API Reference for the** [SegmentedBar Class](http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html) +| Name | Type | Description | +|----------|---------|----------------| +| `selectedIndex` | `number` | Gets or sets the selected index of the SegmentedBar component. | +| `items` | `Array` | Gets or sets the items of the SegmentedBar. | +| `selectedBackgroundColor` | `Color` | Gets or sets the selected background color of the SegmentedBar component. | -**Native Component** +## Events -| Android | iOS | -|:-----------------------|:---------| +| Name | Description | +|----------|----------------| +| `selectedIndexChanged` | Emitted when the selected index is changed (via interaction or programmatically). | + + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/segmented-bar](http://docs.nativescript.org/api-reference/modules/_ui_segmented_bar_.html) | `Module` | +| [SegmentedBar](https://docs.nativescript.org/api-reference/classes/_ui_segmented_bar_.segmentedbar) | `Class` | +| [SegmentedBarItem](https://docs.nativescript.org/api-reference/classes/_ui_segmented_bar_.segmentedbaritem) | `Class` | +| [SelectedIndexChangedEventData](https://docs.nativescript.org/api-reference/interfaces/_ui_segmented_bar_.selectedindexchangedeventdata) | `Interface` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| | [android.widget.TabHost](http://developer.android.com/reference/android/widget/TabHost.html) | [UISegmentedControl](https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UISegmentedControl_Class/index.html) | diff --git a/app/ng-ui-widgets-category/segmented-bar/metadata.md b/app/ng-ui-widgets-category/segmented-bar/metadata.md index 24c4fad7..9a908f05 100644 --- a/app/ng-ui-widgets-category/segmented-bar/metadata.md +++ b/app/ng-ui-widgets-category/segmented-bar/metadata.md @@ -4,3 +4,4 @@ description: SegmentedBar component allows defining a collection of clickable vi position: 38 slug: segmented-bar-ng --- +example-order: usage, styling \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/overview.md b/app/ng-ui-widgets-category/segmented-bar/overview.md index f050d4b0..326c5665 100644 --- a/app/ng-ui-widgets-category/segmented-bar/overview.md +++ b/app/ng-ui-widgets-category/segmented-bar/overview.md @@ -1,7 +1,2 @@ -Using a SegmentedBar inside an Angular project gives you a simple way to define a collection of tabbed views. -The SegmentedBar’s `selectedIndexChange` property notifies you for every changes of the component’s `selectedIndex`. - -The specific `SegmentedBar` properties are: - - `items` - - `selectedIndex` - - `selectedIndexChange` +Using a `SegmentedBar` inside a NativeScript project gives you a simple way to define a collection of tabbed views. +The SegmentedBar’s `selectedIndexChange` event is emitted you for every changes of the component’s `selectedIndex`. diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.component.ts b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.component.ts index 7ba5aafe..d117823d 100644 --- a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.component.ts +++ b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.component.ts @@ -2,8 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Basic SegmentedBar", "/segmented-bar/basic"), - new Link("SegmentedBar view change", "/segmented-bar/views") + new Link("Usage", "/segmented-bar/usage"), + new Link("Styling", "/segmented-bar/styling") ]; @Component({ diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.module.ts b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.module.ts index 6691a823..185e8e43 100644 --- a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.module.ts +++ b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-examples.module.ts @@ -2,8 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { SegmentedBarExamplesComponent } from "./segmented-bar-examples.component"; -import { BasicSegmentedBarComponent } from "./basic-segmented-bar/basic-segmented-bar.component"; -import { SegmentedBarViewsComponent } from "./segmented-bar-views/segmented-bar-views.component"; +import { BasicSegmentedBarComponent } from "./usage/usage.component"; +import { SegmentedBarViewsComponent } from "./styling/styling.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -12,14 +12,14 @@ export const routerConfig = [ component: SegmentedBarExamplesComponent }, { - path: "basic", + path: "usage", component: BasicSegmentedBarComponent, - data: { title: "Basic SegmentedBar" } + data: { title: "Usage" } }, { - path: "views", + path: "styling", component: SegmentedBarViewsComponent, - data: { title: "SegmentedBar views" } + data: { title: "Styling" } } ]; diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/article.md b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/article.md deleted file mode 100644 index 444fa516..00000000 --- a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/article.md +++ /dev/null @@ -1,5 +0,0 @@ -HTML - - -Setting SegmentedBar's items and visibility of the views - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.html b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.html deleted file mode 100644 index 8ac34f38..00000000 --- a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.ts b/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.ts deleted file mode 100644 index 96815087..00000000 --- a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/segmented-bar-views.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -// >> segmentedbar-items-setting-visibility -import { Component } from "@angular/core"; -import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar"; - -@Component({ - moduleId: module.id, - styleUrls: ["./style.css"], - templateUrl: "./segmented-bar-views.component.html" -}) -export class SegmentedBarViewsComponent { - public items: Array; - public selectedIndex = 0; - - constructor() { - this.items = []; - for (let i = 1; i < 4; i++) { - let segmentedBarItem = new SegmentedBarItem(); - segmentedBarItem.title = "View " + i; - this.items.push(segmentedBarItem); - } - } - - public onSelectedIndexChange(args) { - let segmentedBar = args.object; - this.selectedIndex = segmentedBar.selectedIndex; - } - -} -// << segmentedbar-items-setting-visibility diff --git a/app/ng-ui-widgets-category/segmented-bar/styling/article.md b/app/ng-ui-widgets-category/segmented-bar/styling/article.md new file mode 100644 index 00000000..17b065ee --- /dev/null +++ b/app/ng-ui-widgets-category/segmented-bar/styling/article.md @@ -0,0 +1,3 @@ + + +> **Note:** The property `selectedBackgroundColor` will behave differently on different platforms. On Android, it will apply color for the underline of the selected bar item, while on iOS, it will apply background color for the whole selected bar item. diff --git a/app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/style.css b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.css similarity index 100% rename from app/ng-ui-widgets-category/segmented-bar/segmented-bar-views/style.css rename to app/ng-ui-widgets-category/segmented-bar/styling/styling.component.css diff --git a/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.html b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.html new file mode 100644 index 00000000..724e991a --- /dev/null +++ b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.html @@ -0,0 +1,9 @@ + + + + + + +§ \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts new file mode 100644 index 00000000..1adb3f6d --- /dev/null +++ b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts @@ -0,0 +1,19 @@ +import { Component } from "@angular/core"; +import { SegmentedBarItem } from "tns-core-modules/ui/segmented-bar"; + +@Component({ + moduleId: module.id, + styleUrls: ["./styling.component.css"], + templateUrl: "./styling.component.html" +}) +export class SegmentedBarViewsComponent { + public items: Array = []; + + constructor() { + for (let i = 1; i < 4; i++) { + let segmentedBarItem = new SegmentedBarItem(); + segmentedBarItem.title = "View " + i; + this.items.push(segmentedBarItem); + } + } +} \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/article.md b/app/ng-ui-widgets-category/segmented-bar/usage/article.md similarity index 82% rename from app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/article.md rename to app/ng-ui-widgets-category/segmented-bar/usage/article.md index 035cfd4f..e1962bea 100644 --- a/app/ng-ui-widgets-category/segmented-bar/basic-segmented-bar/article.md +++ b/app/ng-ui-widgets-category/segmented-bar/usage/article.md @@ -1,5 +1,2 @@ -HTML - -TypeScript \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.html b/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.html new file mode 100644 index 00000000..eca9d71e --- /dev/null +++ b/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.html @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.ts b/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.ts new file mode 100644 index 00000000..98cafb21 --- /dev/null +++ b/app/ng-ui-widgets-category/segmented-bar/usage/usage.component.ts @@ -0,0 +1,27 @@ +// >> add-segmentedbar-items +import { Component, ChangeDetectionStrategy } from "@angular/core"; +import { SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData } from "tns-core-modules/ui/segmented-bar"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html", + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class BasicSegmentedBarComponent { + mySegmentedBarItems: Array = []; + + constructor() { + for (let i = 1; i < 5; i++) { + const item = new SegmentedBarItem(); + item.title = "Item " + i; + this.mySegmentedBarItems.push(item); + } + } + + public onSelectedIndexChange(args: SelectedIndexChangedEventData) { + const segmentedBar = args.object as SegmentedBar; + const oldIndex = args.oldIndex; + const newIndex = args.newIndex; + } +} +// << add-segmentedbar-items From 9081dcf3133b2fc9b46c2ba6c1cfaf0b29a5e9fa Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 14:25:57 +0300 Subject: [PATCH 3/8] docs: Slider revamp --- .../styling/styling.component.ts | 2 +- .../slider/basic-slider/article.md | 5 --- .../basic-slider/basic-slider.component.html | 17 --------- .../basic-slider/basic-slider.component.ts | 24 ------------ app/ng-ui-widgets-category/slider/end.md | 29 ++++++++++++-- app/ng-ui-widgets-category/slider/metadata.md | 1 + .../slider-access-value-code/article.md | 5 --- .../slider-access-value.component.html | 38 ------------------- .../slider-access-value.component.ts | 27 ------------- .../slider/slider-examples.component.ts | 4 +- .../slider/slider-examples.module.ts | 20 +++++----- .../slider/styling/article.md | 1 + .../slider/styling/styling.component.html | 9 +++++ .../slider/styling/styling.component.ts | 7 ++++ .../slider/usage/article.md | 2 + .../slider/usage/usage.component.html | 7 ++++ .../slider/usage/usage.component.ts | 15 ++++++++ 17 files changed, 80 insertions(+), 133 deletions(-) delete mode 100644 app/ng-ui-widgets-category/slider/basic-slider/article.md delete mode 100644 app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.html delete mode 100644 app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.ts delete mode 100644 app/ng-ui-widgets-category/slider/slider-access-value-code/article.md delete mode 100644 app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.html delete mode 100644 app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.ts create mode 100644 app/ng-ui-widgets-category/slider/styling/article.md create mode 100644 app/ng-ui-widgets-category/slider/styling/styling.component.html create mode 100644 app/ng-ui-widgets-category/slider/styling/styling.component.ts create mode 100644 app/ng-ui-widgets-category/slider/usage/article.md create mode 100644 app/ng-ui-widgets-category/slider/usage/usage.component.html create mode 100644 app/ng-ui-widgets-category/slider/usage/usage.component.ts diff --git a/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts index 1adb3f6d..130fbd91 100644 --- a/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts +++ b/app/ng-ui-widgets-category/segmented-bar/styling/styling.component.ts @@ -16,4 +16,4 @@ export class SegmentedBarViewsComponent { this.items.push(segmentedBarItem); } } -} \ No newline at end of file +} diff --git a/app/ng-ui-widgets-category/slider/basic-slider/article.md b/app/ng-ui-widgets-category/slider/basic-slider/article.md deleted file mode 100644 index 5156bd39..00000000 --- a/app/ng-ui-widgets-category/slider/basic-slider/article.md +++ /dev/null @@ -1,5 +0,0 @@ -HTML - - -CSS - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.html b/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.html deleted file mode 100644 index 47ff9325..00000000 --- a/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.ts b/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.ts deleted file mode 100644 index 36d60760..00000000 --- a/app/ng-ui-widgets-category/slider/basic-slider/basic-slider.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component } from "@angular/core"; -import { Slider } from "tns-core-modules/ui/slider"; - -@Component({ - moduleId: module.id, - templateUrl: "./basic-slider.component.html", - styleUrls: ["./../style.css"] -}) -export class BasicSliderComponent { - public currentValue: number = 10; - public fontSize: number = 20; - - public onSliderValueChange(args) { - let slider = args.object; - - this.currentValue = slider.value; - } - - public onSecondSliderChange(args) { - let slider = args.object; - - this.fontSize = slider.value; - } -} diff --git a/app/ng-ui-widgets-category/slider/end.md b/app/ng-ui-widgets-category/slider/end.md index d8e56110..18f727e0 100644 --- a/app/ng-ui-widgets-category/slider/end.md +++ b/app/ng-ui-widgets-category/slider/end.md @@ -1,8 +1,29 @@ +## Properties -**API Reference for the** [Slider Class](http://docs.nativescript.org/api-reference/modules/_ui_slider_.html) +| Name | Type | Description | +|----------|---------|----------------| +| `selectedIndex` | `number` | Gets or sets the selected index of the SegmentedBar component. | +| `items` | `Array` | Gets or sets the items of the SegmentedBar. | +| `selectedBackgroundColor` | `Color` | Gets or sets the selected background color of the SegmentedBar component. | -**Native Component** +## Events -| Android | iOS | -|:-----------------------|:---------| +| Name | Description | +|----------|----------------| +| `selectedIndexChanged` | Emitted when the selected index is changed (via interaction or programmatically). | + + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/slider](http://docs.nativescript.org/api-reference/modules/_ui_slider_.html) | `Module` | +| [Slider](https://docs.nativescript.org/api-reference/classes/_ui_slider_.slider) | `Class` | + + +## Native Component + +| Android | iOS | +|:----------------------|:---------| | [android.widget.SeekBar](http://developer.android.com/reference/android/widget/SeekBar.html) | [UISlider](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISlider_Class/) | + diff --git a/app/ng-ui-widgets-category/slider/metadata.md b/app/ng-ui-widgets-category/slider/metadata.md index 8b2fc072..4bf56cf0 100644 --- a/app/ng-ui-widgets-category/slider/metadata.md +++ b/app/ng-ui-widgets-category/slider/metadata.md @@ -4,3 +4,4 @@ description: Slider module provides abstraction over iOS's UISlider and Android' position: 39 slug: slider-ng --- +example-order: usage, styling diff --git a/app/ng-ui-widgets-category/slider/slider-access-value-code/article.md b/app/ng-ui-widgets-category/slider/slider-access-value-code/article.md deleted file mode 100644 index 95051377..00000000 --- a/app/ng-ui-widgets-category/slider/slider-access-value-code/article.md +++ /dev/null @@ -1,5 +0,0 @@ -HTML - - -Set the default values of the `Sliders` and review result via `Alert` - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.html b/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.html deleted file mode 100644 index b91dfb12..00000000 --- a/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.ts b/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.ts deleted file mode 100644 index 43e7553b..00000000 --- a/app/ng-ui-widgets-category/slider/slider-access-value-code/slider-access-value.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// >> slider-setting-default-values -import { Component } from "@angular/core"; - -@Component({ - moduleId: module.id, - // >> (hide) - styleUrls: ["./../style.css"], - // << (hide) - templateUrl: "./slider-access-value.component.html", -}) -export class SliderAccessValueComponent { - public sliderValue1 = 15; - public sliderValue2 = 40; - public sliderValue3 = 800; - public sliderValue4 = 80; - public sliderValue5 = 100; - - public onTap() { - let alertView = "First Slider: " + this.sliderValue1 + "\n" + - "Second Slider: " + this.sliderValue2 + "\n" + - "Third Slider: " + this.sliderValue3 + "\n" + - "Fourth Slider: " + this.sliderValue4 + "\n" + - "Fifth Slider: " + this.sliderValue5; - alert(alertView); - } -} -// << slider-setting-default-values diff --git a/app/ng-ui-widgets-category/slider/slider-examples.component.ts b/app/ng-ui-widgets-category/slider/slider-examples.component.ts index 8e2a25b8..9bd72c8e 100644 --- a/app/ng-ui-widgets-category/slider/slider-examples.component.ts +++ b/app/ng-ui-widgets-category/slider/slider-examples.component.ts @@ -2,8 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Basic Slider", "/slider/basic"), - new Link("Access Slider's value", "/slider/value") + new Link("Usage", "/slider/usage"), + new Link("Styling", "/slider/styling") ]; @Component({ diff --git a/app/ng-ui-widgets-category/slider/slider-examples.module.ts b/app/ng-ui-widgets-category/slider/slider-examples.module.ts index 47821c02..c88f5e0a 100644 --- a/app/ng-ui-widgets-category/slider/slider-examples.module.ts +++ b/app/ng-ui-widgets-category/slider/slider-examples.module.ts @@ -3,8 +3,8 @@ import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { SliderExamplesComponent } from "./slider-examples.component"; -import { BasicSliderComponent } from "./basic-slider/basic-slider.component"; -import { SliderAccessValueComponent } from "./slider-access-value-code/slider-access-value.component"; +import { UsageComponent } from "./usage/usage.component"; +import { StylingComponent } from "./styling/styling.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -13,14 +13,14 @@ export const routerConfig = [ component: SliderExamplesComponent }, { - path: "basic", - component: BasicSliderComponent, - data: { title: "Basic Slider" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } }, { - path: "value", - component: SliderAccessValueComponent, - data: { title: "Slider's value" } + path: "styling", + component: StylingComponent, + data: { title: "Styling" } } ]; @@ -35,8 +35,8 @@ export const routerConfig = [ ], declarations: [ SliderExamplesComponent, - BasicSliderComponent, - SliderAccessValueComponent + UsageComponent, + StylingComponent ] }) diff --git a/app/ng-ui-widgets-category/slider/styling/article.md b/app/ng-ui-widgets-category/slider/styling/article.md new file mode 100644 index 00000000..0307238a --- /dev/null +++ b/app/ng-ui-widgets-category/slider/styling/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-ui-widgets-category/slider/styling/styling.component.html b/app/ng-ui-widgets-category/slider/styling/styling.component.html new file mode 100644 index 00000000..8c9b28d7 --- /dev/null +++ b/app/ng-ui-widgets-category/slider/styling/styling.component.html @@ -0,0 +1,9 @@ + + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/styling/styling.component.ts b/app/ng-ui-widgets-category/slider/styling/styling.component.ts new file mode 100644 index 00000000..3afa5d94 --- /dev/null +++ b/app/ng-ui-widgets-category/slider/styling/styling.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + moduleId: module.id, + templateUrl: "./styling.component.html" +}) +export class StylingComponent { } diff --git a/app/ng-ui-widgets-category/slider/usage/article.md b/app/ng-ui-widgets-category/slider/usage/article.md new file mode 100644 index 00000000..1cf0daa7 --- /dev/null +++ b/app/ng-ui-widgets-category/slider/usage/article.md @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/usage/usage.component.html b/app/ng-ui-widgets-category/slider/usage/usage.component.html new file mode 100644 index 00000000..d616146c --- /dev/null +++ b/app/ng-ui-widgets-category/slider/usage/usage.component.html @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/slider/usage/usage.component.ts b/app/ng-ui-widgets-category/slider/usage/usage.component.ts new file mode 100644 index 00000000..dd8b48f3 --- /dev/null +++ b/app/ng-ui-widgets-category/slider/usage/usage.component.ts @@ -0,0 +1,15 @@ +// >> basic-slider-tsc +import { Component } from "@angular/core"; +import { Slider } from "tns-core-modules/ui/slider"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class UsageComponent { + onSliderValueChange(args) { + let slider = args.object; + console.log(`Slider new value ${args.newValue}`); + } +} +// << basic-slider-tsc \ No newline at end of file From d65a0f0be6fe8136e240846bd83ca396a27db911 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 14:43:20 +0300 Subject: [PATCH 4/8] docs: Switch revamp --- .../segmented-bar/end.md | 1 - .../basic-switch/basic-switch.component.html | 10 ----- .../basic-switch/basic-switch.component.ts | 40 ------------------- .../switch/disable-switch/article.md | 2 - .../disable-switch.component.html | 9 ----- .../disable-switch.component.ts | 9 ----- .../switch/disable-switch/style.css | 14 ------- app/ng-ui-widgets-category/switch/end.md | 16 +++++++- app/ng-ui-widgets-category/switch/metadata.md | 1 + .../switch/styling-switch/style.css | 14 ------- .../styling-switch.component.html | 13 ------ .../{styling-switch => styling}/article.md | 4 +- .../styling/styling-switch.component.html | 7 ++++ .../styling-switch.component.ts | 3 +- .../switch/switch-examples.component.ts | 6 +-- .../switch/switch-examples.module.ts | 17 +++----- .../switch/switch.style.css | 4 -- .../switch/{basic-switch => usage}/article.md | 3 -- .../switch/usage/usage.component.html | 5 +++ .../switch/usage/usage.component.ts | 17 ++++++++ 20 files changed, 55 insertions(+), 140 deletions(-) delete mode 100644 app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html delete mode 100644 app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts delete mode 100644 app/ng-ui-widgets-category/switch/disable-switch/article.md delete mode 100644 app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html delete mode 100644 app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.ts delete mode 100644 app/ng-ui-widgets-category/switch/disable-switch/style.css delete mode 100644 app/ng-ui-widgets-category/switch/styling-switch/style.css delete mode 100644 app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html rename app/ng-ui-widgets-category/switch/{styling-switch => styling}/article.md (72%) create mode 100644 app/ng-ui-widgets-category/switch/styling/styling-switch.component.html rename app/ng-ui-widgets-category/switch/{styling-switch => styling}/styling-switch.component.ts (60%) delete mode 100644 app/ng-ui-widgets-category/switch/switch.style.css rename app/ng-ui-widgets-category/switch/{basic-switch => usage}/article.md (54%) create mode 100644 app/ng-ui-widgets-category/switch/usage/usage.component.html create mode 100644 app/ng-ui-widgets-category/switch/usage/usage.component.ts diff --git a/app/ng-ui-widgets-category/segmented-bar/end.md b/app/ng-ui-widgets-category/segmented-bar/end.md index c1407213..68853b8d 100644 --- a/app/ng-ui-widgets-category/segmented-bar/end.md +++ b/app/ng-ui-widgets-category/segmented-bar/end.md @@ -12,7 +12,6 @@ |----------|----------------| | `selectedIndexChanged` | Emitted when the selected index is changed (via interaction or programmatically). | - ## API References | Name | Type | 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 deleted file mode 100644 index f5aba8c8..00000000 --- a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.html +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ 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 deleted file mode 100644 index 99a5418c..00000000 --- a/app/ng-ui-widgets-category/switch/basic-switch/basic-switch.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -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, - templateUrl: "./basic-switch.component.html", - styleUrls: ["./../switch.style.css"], -}) -export class BasicSwitchComponent { - firstSwitchState = "OFF"; - secondSwitchState = "ON"; - - onFirstChecked(args) { - let firstSwitch = args.object as Switch; - if (firstSwitch.checked) { - this.firstSwitchState = "ON"; - } else { - this.firstSwitchState = "OFF"; - } - } - - // >> 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 -} - diff --git a/app/ng-ui-widgets-category/switch/disable-switch/article.md b/app/ng-ui-widgets-category/switch/disable-switch/article.md deleted file mode 100644 index f02d0fbd..00000000 --- a/app/ng-ui-widgets-category/switch/disable-switch/article.md +++ /dev/null @@ -1,2 +0,0 @@ -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 deleted file mode 100644 index 0da9a063..00000000 --- a/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.ts b/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.ts deleted file mode 100644 index bfb3f789..00000000 --- a/app/ng-ui-widgets-category/switch/disable-switch/disable-switch.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { Component, ViewChild, ElementRef } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./disable-switch.component.html", - styleUrls: ["./../switch.style.css"], -}) -export class DisableSwitchComponent { -} diff --git a/app/ng-ui-widgets-category/switch/disable-switch/style.css b/app/ng-ui-widgets-category/switch/disable-switch/style.css deleted file mode 100644 index 2b14abc6..00000000 --- a/app/ng-ui-widgets-category/switch/disable-switch/style.css +++ /dev/null @@ -1,14 +0,0 @@ -button, label, stack-layout { - horizontal-align: center; -} - -.message { - font-size: 20; - color: #284848; - text-align: center; - margin: 0 20; -} - -.icon { - font-family: 'IcoMoon-Free'; -} \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/end.md b/app/ng-ui-widgets-category/switch/end.md index 1ba8059f..0276e412 100644 --- a/app/ng-ui-widgets-category/switch/end.md +++ b/app/ng-ui-widgets-category/switch/end.md @@ -1,8 +1,20 @@ +## Properties -**API Reference for the** [Switch Class](http://docs.nativescript.org/api-reference/modules/_ui_switch_.html) +| Name | Type | Description | +|----------|---------|----------------| +| `checked` | `boolean` | Gets or sets if a switch is checked or not. | +| `offBackgroundColor` | `Color` | Gets or sets the off-state color. | -**Native Component** +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/switch](http://docs.nativescript.org/api-reference/modules/_ui_switch_.html) | `Module` | +| [Switch](https://docs.nativescript.org/api-reference/classes/_ui_switch_.switch) | `Class` | + +## Native Component | Android | iOS | |:----------------------|:---------| | [android.widget.Switch](http://developer.android.com/reference/android/widget/Switch.html) | [UISwitch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISwitch_Class/) | + diff --git a/app/ng-ui-widgets-category/switch/metadata.md b/app/ng-ui-widgets-category/switch/metadata.md index 5e678c5b..547589f1 100644 --- a/app/ng-ui-widgets-category/switch/metadata.md +++ b/app/ng-ui-widgets-category/switch/metadata.md @@ -4,3 +4,4 @@ description: The Switch component represents control, which can have two states( position: 41 slug: switch-ng --- +example-order: usage, styling diff --git a/app/ng-ui-widgets-category/switch/styling-switch/style.css b/app/ng-ui-widgets-category/switch/styling-switch/style.css deleted file mode 100644 index e6de0b6b..00000000 --- a/app/ng-ui-widgets-category/switch/styling-switch/style.css +++ /dev/null @@ -1,14 +0,0 @@ -/* >> switch-style-css */ -.secondSwitchStyle{ - color: yellow; - background-color: green; - off-background-color: red; -} - -.thirdSwitchStyle{ - 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 deleted file mode 100644 index b007dd1c..00000000 --- a/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - \ 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/article.md similarity index 72% rename from app/ng-ui-widgets-category/switch/styling-switch/article.md rename to app/ng-ui-widgets-category/switch/styling/article.md index bb60d22a..f2be620a 100644 --- a/app/ng-ui-widgets-category/switch/styling-switch/article.md +++ b/app/ng-ui-widgets-category/switch/styling/article.md @@ -2,5 +2,7 @@ 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. + - \ No newline at end of file + +> Note: When using `nativescript-theme-core` the default style will be set according to the used theme (no need to set additional CSS classes). diff --git a/app/ng-ui-widgets-category/switch/styling/styling-switch.component.html b/app/ng-ui-widgets-category/switch/styling/styling-switch.component.html new file mode 100644 index 00000000..8468f749 --- /dev/null +++ b/app/ng-ui-widgets-category/switch/styling/styling-switch.component.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.ts b/app/ng-ui-widgets-category/switch/styling/styling-switch.component.ts similarity index 60% rename from app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.ts rename to app/ng-ui-widgets-category/switch/styling/styling-switch.component.ts index c3638a22..9a7b09ce 100644 --- a/app/ng-ui-widgets-category/switch/styling-switch/styling-switch.component.ts +++ b/app/ng-ui-widgets-category/switch/styling/styling-switch.component.ts @@ -2,7 +2,6 @@ import { Component } from "@angular/core"; @Component({ moduleId: module.id, - templateUrl: "./styling-switch.component.html", - styleUrls: ["./style.css"] + templateUrl: "./styling-switch.component.html" }) export class StylingSwitchComponent {} diff --git a/app/ng-ui-widgets-category/switch/switch-examples.component.ts b/app/ng-ui-widgets-category/switch/switch-examples.component.ts index 0511ff81..47a68646 100644 --- a/app/ng-ui-widgets-category/switch/switch-examples.component.ts +++ b/app/ng-ui-widgets-category/switch/switch-examples.component.ts @@ -2,15 +2,13 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Basic Switch", "/switch/basic"), - new Link("Disable Switch", "/switch/disable"), - new Link("Styling Switch", "/switch/styling") + new Link("Usage", "/switch/usage"), + new Link("Styling", "/switch/styling") ]; @Component({ moduleId: module.id, templateUrl: "./../../examples-list.component.html", - styleUrls: ["./switch.style.css"], changeDetection: ChangeDetectionStrategy.OnPush }) export class SwitchExamplesComponent { diff --git a/app/ng-ui-widgets-category/switch/switch-examples.module.ts b/app/ng-ui-widgets-category/switch/switch-examples.module.ts index 79d84cba..b5ac0f71 100644 --- a/app/ng-ui-widgets-category/switch/switch-examples.module.ts +++ b/app/ng-ui-widgets-category/switch/switch-examples.module.ts @@ -2,9 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { SwitchExamplesComponent } from "./switch-examples.component"; -import { BasicSwitchComponent } from "./basic-switch/basic-switch.component"; -import { DisableSwitchComponent } from "./disable-switch/disable-switch.component"; -import { StylingSwitchComponent } from "./styling-switch/styling-switch.component"; +import { BasicSwitchComponent } from "./usage/usage.component"; +import { StylingSwitchComponent } from "./styling/styling-switch.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -13,19 +12,14 @@ export const routerConfig = [ component: SwitchExamplesComponent }, { - path: "basic", + path: "usage", component: BasicSwitchComponent, - data: { title: "Basic Switch" } - }, - { - path: "disable", - component: DisableSwitchComponent, - data: { title: "Disable Switch component" } + data: { title: "Usage" } }, { path: "styling", component: StylingSwitchComponent, - data: { title: "Styling Switch component" } + data: { title: "Styling" } } ]; @@ -40,7 +34,6 @@ export const routerConfig = [ declarations: [ SwitchExamplesComponent, BasicSwitchComponent, - DisableSwitchComponent, StylingSwitchComponent ] }) diff --git a/app/ng-ui-widgets-category/switch/switch.style.css b/app/ng-ui-widgets-category/switch/switch.style.css deleted file mode 100644 index 743762e0..00000000 --- a/app/ng-ui-widgets-category/switch/switch.style.css +++ /dev/null @@ -1,4 +0,0 @@ -Switch { - margin-bottom: 30; - vertical-align: center; -} \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/basic-switch/article.md b/app/ng-ui-widgets-category/switch/usage/article.md similarity index 54% rename from app/ng-ui-widgets-category/switch/basic-switch/article.md rename to app/ng-ui-widgets-category/switch/usage/article.md index 55c4767e..ed0f9de1 100644 --- a/app/ng-ui-widgets-category/switch/basic-switch/article.md +++ b/app/ng-ui-widgets-category/switch/usage/article.md @@ -1,5 +1,2 @@ -HTML - -Handle `checkedChange` event and setting default value. \ No newline at end of file diff --git a/app/ng-ui-widgets-category/switch/usage/usage.component.html b/app/ng-ui-widgets-category/switch/usage/usage.component.html new file mode 100644 index 00000000..48333422 --- /dev/null +++ b/app/ng-ui-widgets-category/switch/usage/usage.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/app/ng-ui-widgets-category/switch/usage/usage.component.ts b/app/ng-ui-widgets-category/switch/usage/usage.component.ts new file mode 100644 index 00000000..fa9f3daa --- /dev/null +++ b/app/ng-ui-widgets-category/switch/usage/usage.component.ts @@ -0,0 +1,17 @@ +// >> switch-event-handle-code +import { Component } from "@angular/core"; +import { EventData } from "tns-core-modules/data/observable"; +import { Switch } from "tns-core-modules/ui/switch"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class BasicSwitchComponent { + + onCheckedChange(args: EventData) { + let sw = args.object as Switch; + let isChecked = sw.checked; // boolean + } +} +// << switch-event-handle-code From 7b49fa9c0b298bf1193f928771b906ca9961cb1e Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 16:22:04 +0300 Subject: [PATCH 5/8] docs: TabView revamp --- .../slider/usage/usage.component.ts | 2 +- app/ng-ui-widgets-category/switch/overview.md | 7 ++- .../basics/basic-tab-view.component.ts | 11 ---- app/ng-ui-widgets-category/tab-view/end.md | 52 +++++++++++++++++-- .../tab-view/metadata.md | 1 + .../tab-view/navigation/article.md | 7 --- .../navigation/navigation.component.html | 24 --------- .../navigation/navigation.component.ts | 49 ----------------- .../offscreen-tab-limit-android/article.md | 4 -- .../tabs-limit.component.html | 12 ----- .../tabs-limit.component.ts | 7 --- .../tab-view/overview.md | 17 ++---- .../tab-view/styling/article.md | 13 +---- .../tab-view/tab-view-examples.component.ts | 9 ++-- .../tab-view/tab-view-examples.module.ts | 38 ++++---------- .../tab-view/tabs-position-android/article.md | 4 -- .../tabs-position.component.ts | 7 --- .../tab-view/tips-and-tricks/article.md | 21 ++++++++ .../tips-and-tricks.component.html} | 2 +- .../tips-and-tricks.component.ts | 7 +++ .../tab-view/title-icon-fonts/article.md | 7 --- .../tab-view/title-icon-fonts/style.css | 5 -- .../tab-view-icon-fonts.component.html | 14 ----- .../tab-view-icon-fonts.component.ts | 8 --- .../tab-view/{basics => usage}/article.md | 1 - .../usage.component.html} | 2 +- .../tab-view/usage/usage.component.ts | 14 +++++ 27 files changed, 113 insertions(+), 232 deletions(-) delete mode 100644 app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.ts delete mode 100644 app/ng-ui-widgets-category/tab-view/navigation/article.md delete mode 100644 app/ng-ui-widgets-category/tab-view/navigation/navigation.component.html delete mode 100644 app/ng-ui-widgets-category/tab-view/navigation/navigation.component.ts delete mode 100644 app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/article.md delete mode 100644 app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.html delete mode 100644 app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.ts delete mode 100644 app/ng-ui-widgets-category/tab-view/tabs-position-android/article.md delete mode 100644 app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.ts create mode 100644 app/ng-ui-widgets-category/tab-view/tips-and-tricks/article.md rename app/ng-ui-widgets-category/tab-view/{tabs-position-android/tabs-position.component.html => tips-and-tricks/tips-and-tricks.component.html} (92%) create mode 100644 app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.ts delete mode 100644 app/ng-ui-widgets-category/tab-view/title-icon-fonts/article.md delete mode 100644 app/ng-ui-widgets-category/tab-view/title-icon-fonts/style.css delete mode 100644 app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.html delete mode 100644 app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.ts rename app/ng-ui-widgets-category/tab-view/{basics => usage}/article.md (99%) rename app/ng-ui-widgets-category/tab-view/{basics/basic-tab-view.component.html => usage/usage.component.html} (87%) create mode 100644 app/ng-ui-widgets-category/tab-view/usage/usage.component.ts diff --git a/app/ng-ui-widgets-category/slider/usage/usage.component.ts b/app/ng-ui-widgets-category/slider/usage/usage.component.ts index dd8b48f3..a210c801 100644 --- a/app/ng-ui-widgets-category/slider/usage/usage.component.ts +++ b/app/ng-ui-widgets-category/slider/usage/usage.component.ts @@ -12,4 +12,4 @@ export class UsageComponent { console.log(`Slider new value ${args.newValue}`); } } -// << basic-slider-tsc \ No newline at end of file +// << basic-slider-tsc diff --git a/app/ng-ui-widgets-category/switch/overview.md b/app/ng-ui-widgets-category/switch/overview.md index 88103588..aade6736 100644 --- a/app/ng-ui-widgets-category/switch/overview.md +++ b/app/ng-ui-widgets-category/switch/overview.md @@ -1,4 +1,3 @@ -The switch component allows users to toggle a control between two states. -The default state of the component is off, or `false`, however you can change the state by setting the `checked` property to a boolean value. -To handle the state change event you can use the `checkedChange` property, which notifies the app when the value has changed. -Another useful feature of the component is the `isEnable` property, which gives the functionality to make the component inactive. +The `Switch` component allows users to toggle a control between two states. +The default state of the component is off, or `false`, however you can change the state by setting the `checked` property to a boolean value. To handle the state change event you can use the `checkedChange` property, which notifies the app when the value has changed. + diff --git a/app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.ts b/app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.ts deleted file mode 100644 index 599b00d7..00000000 --- a/app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Component } from "@angular/core"; -// >> tab-view-require -import { TabView } from "tns-core-modules/ui/tab-view"; -// << tab-view-require - -@Component({ - moduleId: module.id, - templateUrl: "./basic-tab-view.component.html" -}) -export class BasicTabViewComponent { } - diff --git a/app/ng-ui-widgets-category/tab-view/end.md b/app/ng-ui-widgets-category/tab-view/end.md index aa0def17..c02630f3 100644 --- a/app/ng-ui-widgets-category/tab-view/end.md +++ b/app/ng-ui-widgets-category/tab-view/end.md @@ -1,8 +1,52 @@ +## Properties -**API Reference for the** [TabView Class](http://docs.nativescript.org/api-reference/modules/_ui_tab_view_.html) +### TabView Properties -**Native Component** +| Name | Type | Description | +|:---------|:---------|:---------------| -| Android | iOS | -|:-----------------------|:---------| +| `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. Tabs beyond this limit will be recreated from the TabView when needed. | +| `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. | +| `iosIconRenderingMode` | _"automatic" | "alwaysOriginal" | "alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. | +| `items` | `Array` | Gets or sets the items of the TabView. | +| `selectedIndex` | `number` | Gets or sets the selectedIndex of the TabView. | +| `selectedTabTextColor` | `Color` | Gets or sets the text color of the selected tab title. | +| `tabBackgroundColor` | `Color` | Gets or sets the background color of the tabs. | +| `tabTextColor` | `Color` | Gets or sets the font size of the tabs titles. | +| `tabTextFontSize` | `Color` | Gets or sets the font size of the tabs titles. | + +### TabViewItem Properties + +| Name | Type | Description | +|-----------|----------|------------------------------------------------| +| `title` | `string` | Gets or sets the title of the tab strip entry. | +| `iconSource` | `string` | Gets or sets the icon source of the tab strip entry. Supports local image paths (`~`), resource images (`res://`) and icon fonts (`font://`) | + + +## Events + +### TabView Events + +| Name | Description | +|:-----------------------|:------------------------------------------------------| +| `selectedIndexChanged` | Emitted when the `selectedIndex` property is changed. | +| `loaded` | Emitted when the view is loaded. | +| `unloaded` | Emitted when the view is unloaded. | +| `layoutChanged` | Emitted when the layout bounds of a view changes due to layout processing. | + + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/tab-view](http://docs.nativescript.org/api-reference/modules/_ui_tab_view_.html) | `Module` | +| [TabView](https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabview) | `Class` | +| [TabViewItem](https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabviewitem) | `Class` | +| [SelectedIndexChangedEventData](https://docs.nativescript.org/api-reference/interfaces/_ui_tab_view_.selectedindexchangedeventdata) | `Interface` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| | [androidx.viewpager.widget.ViewPager](https://developer.android.com/reference/kotlin/androidx/viewpager/widget/ViewPager) | [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) | + diff --git a/app/ng-ui-widgets-category/tab-view/metadata.md b/app/ng-ui-widgets-category/tab-view/metadata.md index 7fafdbe1..398874af 100644 --- a/app/ng-ui-widgets-category/tab-view/metadata.md +++ b/app/ng-ui-widgets-category/tab-view/metadata.md @@ -4,3 +4,4 @@ description: The TabView modules allow navigating between different views by tap position: 42 slug: tab-view-ng --- +example-order: usage, styling, tips-and-tricks diff --git a/app/ng-ui-widgets-category/tab-view/navigation/article.md b/app/ng-ui-widgets-category/tab-view/navigation/article.md deleted file mode 100644 index 2cd38dbe..00000000 --- a/app/ng-ui-widgets-category/tab-view/navigation/article.md +++ /dev/null @@ -1,7 +0,0 @@ -To navigate between the different `TabViewItem` views programmatically, use the `selectedIndex` property. A typical way to do this in Angular would be set it up as two-way binding. Using this kind of binding is relatively simple. Just use the standard `ngModel` syntax and bind it to the data model property `tabSelectedIndex`. You can also handle user input navigations with the `selectedIndexChanged` event. The following example displays the scenario in practice. - -HTML - - -TypeScript - diff --git a/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.html b/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.html deleted file mode 100644 index e80e063e..00000000 --- a/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.ts b/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.ts deleted file mode 100644 index ee5a2648..00000000 --- a/app/ng-ui-widgets-category/tab-view/navigation/navigation.component.ts +++ /dev/null @@ -1,49 +0,0 @@ - -// >> tab-view-navigation-ng-code -import { Component } from "@angular/core"; -import { alert } from "tns-core-modules/ui/dialogs"; -import { SelectedIndexChangedEventData } from "tns-core-modules/ui/tab-view"; - -@Component({ - moduleId: module.id, - templateUrl: "./navigation.component.html", -}) -export class NavigationComponent { - public tabSelectedIndex: number; - public tabSelectedIndexResult: string; - - constructor() { - this.tabSelectedIndex = 0; - this.tabSelectedIndexResult = "Profile Tab (tabSelectedIndex = 0 )"; - } - - changeTab() { - if (this.tabSelectedIndex === 0) { - this.tabSelectedIndex = 1; - } else if (this.tabSelectedIndex === 1) { - this.tabSelectedIndex = 2; - } else if (this.tabSelectedIndex === 2) { - this.tabSelectedIndex = 0; - } - } - - // displaying the old and new TabView selectedIndex - onSelectedIndexChanged(args: SelectedIndexChangedEventData) { - if (args.oldIndex !== -1) { - const newIndex = args.newIndex; - if (newIndex === 0) { - this.tabSelectedIndexResult = "Profile Tab (tabSelectedIndex = 0 )"; - } else if (newIndex === 1) { - this.tabSelectedIndexResult = "Stats Tab (tabSelectedIndex = 1 )"; - } else if (newIndex === 2) { - this.tabSelectedIndexResult = "Settings Tab (tabSelectedIndex = 2 )"; - } - alert(`Selected index has changed ( Old index: ${args.oldIndex} New index: ${args.newIndex} )`) - .then(() => { - console.log("Dialog closed!"); - }); - } - } - -} -// << tab-view-navigation-ng-code diff --git a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/article.md b/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/article.md deleted file mode 100644 index 6911b346..00000000 --- a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/article.md +++ /dev/null @@ -1,4 +0,0 @@ -Use the `androidOffscreenTabLimit` property to set the number of pre-loaded side tabs on Android. The default value is 1. - -HTML - diff --git a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.html b/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.html deleted file mode 100644 index 8d1c7e6a..00000000 --- a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.ts b/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.ts deleted file mode 100644 index 4bb79f28..00000000 --- a/app/ng-ui-widgets-category/tab-view/offscreen-tab-limit-android/tabs-limit.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component, OnInit } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./tabs-limit.component.html", -}) -export class TabsLimitComponent {} diff --git a/app/ng-ui-widgets-category/tab-view/overview.md b/app/ng-ui-widgets-category/tab-view/overview.md index f86df50a..55821e43 100644 --- a/app/ng-ui-widgets-category/tab-view/overview.md +++ b/app/ng-ui-widgets-category/tab-view/overview.md @@ -1,16 +1,5 @@ -The `TabView` component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views. -By default the `TabView` will load the view of the first tab, however it's possible to load alternative tabs when the app starts by setting the component’s `selectedIndex` property. - - - -The general behavior of the `TabView` component is to load its items on demand. This means that every `TabViewItem` view will be loaded when it is shown and will be unloaded when it disappears. Respectively, the `loaded` and `unloaded` events will be fired when navigating between views. However, there are some specifics for each platform (iOS and Android), which are described in the notes below. -> Note (iOS specific): The iOS implementation uses `UITabBarController`. This means that only one `TabViewItem` can be shown at a given time and only one needs to be loaded. When the user selects a new `TabViewItem`, we load the new item and unload the previous one. +> Important: With version 6 of NativeScript the `TabView` component is deprecated. Consider using `BottomNavigation` or `Tabs` components instead as these components are providing much greater control and functionalities. -> Note (Android specific): The Android implementation uses a `ViewPager` control, which allows using the `swipe` gesture to navigate to the next or previous tab. This means that only one `TabViewItem` can be shown, but multiple `TabViewItems` need to be loaded to the side. If this is not done, you will not be able to see the next `TabViewItem` contents during the swipe. By default, the `ViewPager` control will pre-load one `TabViewItem` on the left and on on the right. Regarding that, if one of the items is already pre-loaded, it will not be loaded again. In NativeScript, we have exposed a property called `androidOffscreenTabLimit`, which allows specifying how many components should be pre-loaded to the sides (if you are setting up `androidOffscreenTabLimit` to 0, the Android behavior will match to the iOS behavior). - -The iOS and Android UX guidelines regarding the Tab controls differ greatly. The difference is described in the below points: - -* The iOS tabs have their tab bar, which will be displayed always on the bottom and does not allow swipe gesture for changing tabs. -* The Android tabs are on top and will enable the swipe navigation between the tabs. -* For Android we have `androidTabsPosition` property which has two options `top`(default value) and `bottom`. Setting up this property to `bottom` allows mimicking Bottom Tab Navigation control(provided by android support library v25 release). Setting the Tabs at the bottom will disable the swipe navigation and the items preloading functionality. \ No newline at end of file +The `TabView` component provides a simple way to navigate between different views by tapping on some of the tabs or by swiping between the views. +By default the `TabView` will load the view of the first tab, however it's possible to load alternative tabs when the app starts by setting the component’s `selectedIndex` property. diff --git a/app/ng-ui-widgets-category/tab-view/styling/article.md b/app/ng-ui-widgets-category/tab-view/styling/article.md index 5b4bc7fc..810c3ad8 100644 --- a/app/ng-ui-widgets-category/tab-view/styling/article.md +++ b/app/ng-ui-widgets-category/tab-view/styling/article.md @@ -1,14 +1,3 @@ -The `TabView` component has the following unique styling properties: +The `TabView` component provides several unique styling properties as shown in the example below. -* `selectedTabTextColor` (corresponding CSS property `selected-tab-text-color` ) - Changes the color of the text, while selecting some of the tabs. - -* `tabBackgroundColor` (corresponding CSS property `tab-background-color`) - Sets the background color of the tabs. - -* `tabTextFontSize` (corresponding CSS property `tab-text-font-size`) - Sets the font size of the tabs. - -* `textTransform` (corresponding CSS property `text-transform`) - Sets the text transform individually for every `TabViewItem`. Value options: `capitalize`, `lowercase`, `none`, and `uppercase`. - -* `androidSelectedTabHighlightColor`android specific property (corresponding CSS property `android-selected-tab-highlight-color`) - Sets the underline color of the tabs in Android. - -HTML diff --git a/app/ng-ui-widgets-category/tab-view/tab-view-examples.component.ts b/app/ng-ui-widgets-category/tab-view/tab-view-examples.component.ts index 958772d3..e49a611e 100644 --- a/app/ng-ui-widgets-category/tab-view/tab-view-examples.component.ts +++ b/app/ng-ui-widgets-category/tab-view/tab-view-examples.component.ts @@ -2,12 +2,9 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Basics", "/tab-view/basic"), - new Link("Styling Tab View", "/tab-view/styling"), - new Link("Navigation", "/tab-view/navigation"), - new Link("Using icon font in TabView", "/tab-view/icon-fonts"), - new Link("Tabs limit(Android)", "/tab-view/tabs-limit"), - new Link("Tabs position(Android)", "/tab-view/tabs-position"), + new Link("Usage", "/tab-view/usage"), + new Link("Styling", "/tab-view/styling"), + new Link("Tips and Tricks", "/tab-view/tips-and-tricks") ]; @Component({ diff --git a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts b/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts index cdaeb049..efded5ca 100644 --- a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts +++ b/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts @@ -2,23 +2,21 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { TabViewExamplesComponent } from "./tab-view-examples.component"; -import { BasicTabViewComponent } from "./basics/basic-tab-view.component"; -import { TabViewIconFontsComponent } from "./title-icon-fonts/tab-view-icon-fonts.component"; +import { BasicTabViewComponent } from "./usage/usage.component" import { StylingComponent } from "./styling/styling.component"; -import { NavigationComponent } from "./navigation/navigation.component"; -import { TabsLimitComponent } from "./offscreen-tab-limit-android/tabs-limit.component"; -import { TabsPositionComponent } from "./tabs-position-android/tabs-position.component"; +import { TipsAndTrciksComponent } from "./tips-and-tricks/tips-and-tricks.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; import { NativeScriptFormsModule } from "nativescript-angular/forms"; +import { TipsAndTricksComponent } from "../scroll-view/tips-and-tricks/tips-and-tricks.component"; export const routerConfig = [ { path: "", component: TabViewExamplesComponent }, { - path: "basic", + path: "usage", component: BasicTabViewComponent, - data: { title: "Basic TabView" } + data: { title: "Usage" } }, { path: "styling", @@ -26,24 +24,9 @@ export const routerConfig = [ data: { title: "Styling Tab View" } }, { - path: "navigation", - component: NavigationComponent, - data: { title: "Navigation" } - }, - { - path: "icon-fonts", - component: TabViewIconFontsComponent, - data: { title: "Using icon font in TabView" } - }, - { - path: "tabs-limit", - component: TabsLimitComponent, - data: { title: "Tabs limit(Android)" } - }, - { - path: "tabs-position", - component: TabsPositionComponent, - data: { title: "Tabs position(Android)" } + path: "tips-andt-tricks", + component: TipsAndTrciksComponent, + data: { title: "Tips and Tricks" } } ]; @@ -60,10 +43,7 @@ export const routerConfig = [ TabViewExamplesComponent, BasicTabViewComponent, StylingComponent, - NavigationComponent, - TabViewIconFontsComponent, - TabsLimitComponent, - TabsPositionComponent + TipsAndTricksComponent ] }) diff --git a/app/ng-ui-widgets-category/tab-view/tabs-position-android/article.md b/app/ng-ui-widgets-category/tab-view/tabs-position-android/article.md deleted file mode 100644 index 722d6660..00000000 --- a/app/ng-ui-widgets-category/tab-view/tabs-position-android/article.md +++ /dev/null @@ -1,4 +0,0 @@ -Use the `androidTabsPosition` property to change the position of the tabs on Android. The default value is `top`. - -HTML - diff --git a/app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.ts b/app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.ts deleted file mode 100644 index 0d2d4c42..00000000 --- a/app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component, OnInit } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./tabs-position.component.html", -}) -export class TabsPositionComponent {} diff --git a/app/ng-ui-widgets-category/tab-view/tips-and-tricks/article.md b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/article.md new file mode 100644 index 00000000..e77736b2 --- /dev/null +++ b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/article.md @@ -0,0 +1,21 @@ +### TabView General Tips + +The general behavior of the `TabView` component is to load its items on demand. This means that every `TabViewItem` view will be loaded when it is shown and will be unloaded when it disappears. Respectively, the `loaded` and `unloaded` events will be fired when navigating between views. However, there are some specifics for each platform (iOS and Android), which are described in the notes below. + +> Note (iOS specific): The iOS implementation uses `UITabBarController`. This means that only one `TabViewItem` can be shown at a given time and only one needs to be loaded. When the user selects a new `TabViewItem`, we load the new item and unload the previous one. + +> Note (Android specific): The Android implementation uses a `ViewPager` control, which allows using the `swipe` gesture to navigate to the next or previous tab. This means that only one `TabViewItem` can be shown, but multiple `TabViewItems` need to be loaded to the side. If this is not done, you will not be able to see the next `TabViewItem` contents during the swipe. By default, the `ViewPager` control will pre-load one `TabViewItem` on the left and on on the right. Regarding that, if one of the items is already pre-loaded, it will not be loaded again. In NativeScript, we have exposed a property called `androidOffscreenTabLimit`, which allows specifying how many components should be pre-loaded to the sides (if you are setting up `androidOffscreenTabLimit` to 0, the Android behavior will match to the iOS behavior). + +The iOS and Android UX guidelines regarding the Tab controls differ greatly. The difference is described in the below points: + +* The iOS tabs have their tab bar, which will be displayed always on the bottom and does not allow swipe gesture for changing tabs. +* The Android tabs are on top and will enable the swipe navigation between the tabs. +* For Android we have `androidTabsPosition` property which has two options `top`(default value) and `bottom`. Setting up this property to `bottom` allows mimicking Bottom Tab Navigation control(provided by android support library v25 release). Setting the Tabs at the bottom will disable the swipe navigation and the items preloading functionality. + +### Setting TabView Position + +Use the `androidTabsPosition` property to change the position of the tabs - works only for Android. The default value is `top`. + + + +> Note: Consider using `BottomNavigation` component to create the same UI for both iOS and Android while having greater control over the funcionalities. \ No newline at end of file diff --git a/app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.html b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html similarity index 92% rename from app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.html rename to app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html index dceecebd..0a9f6492 100644 --- a/app/ng-ui-widgets-category/tab-view/tabs-position-android/tabs-position.component.html +++ b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.html @@ -1,6 +1,6 @@ - +> diff --git a/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.ts b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.ts new file mode 100644 index 00000000..e9f698fb --- /dev/null +++ b/app/ng-ui-widgets-category/tab-view/tips-and-tricks/tips-and-tricks.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + moduleId: module.id, + templateUrl: "./tips-and-tricks.component.html", +}) +export class TipsAndTrciksComponent {} diff --git a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/article.md b/app/ng-ui-widgets-category/tab-view/title-icon-fonts/article.md deleted file mode 100644 index e7551953..00000000 --- a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/article.md +++ /dev/null @@ -1,7 +0,0 @@ -The example demonstrates, how to use Icon font for the `TabView` items title. For more information on how to add and use Icon fonts in your app, refer to the [Icon Fonts]({%slug icon-fonts-ng %}) article. - -HTML - - -CSS - diff --git a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/style.css b/app/ng-ui-widgets-category/tab-view/title-icon-fonts/style.css deleted file mode 100644 index af35a395..00000000 --- a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/style.css +++ /dev/null @@ -1,5 +0,0 @@ -/* >> tabview-icon-font-ng-css */ -.icon{ - font-family: 'IcoMoon-Free'; -} -/* << tabview-icon-font-ng-css */ \ No newline at end of file diff --git a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.html b/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.html deleted file mode 100644 index 3a893468..00000000 --- a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.ts b/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.ts deleted file mode 100644 index 4f4a1b47..00000000 --- a/app/ng-ui-widgets-category/tab-view/title-icon-fonts/tab-view-icon-fonts.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./tab-view-icon-fonts.component.html", - styleUrls: ["./style.css"] -}) -export class TabViewIconFontsComponent {} diff --git a/app/ng-ui-widgets-category/tab-view/basics/article.md b/app/ng-ui-widgets-category/tab-view/usage/article.md similarity index 99% rename from app/ng-ui-widgets-category/tab-view/basics/article.md rename to app/ng-ui-widgets-category/tab-view/usage/article.md index a41f1413..1731dec5 100644 --- a/app/ng-ui-widgets-category/tab-view/basics/article.md +++ b/app/ng-ui-widgets-category/tab-view/usage/article.md @@ -1,6 +1,5 @@ Using a `TabView` inside an Angular app requires some special attention about how to provide `title`, `iconSource` and content (view) of the `TabViewItem`. In a pure NativeScript application `TabView` has an `items` property which could be set via XML to an array of `TabViewItem`s (basically, an array of objects with `title`, `view` and `iconSource` properties). However, NativeScript-Angular does not support nested properties in its HTML template, so adding `TabViewItem` to TabView is a little bit different. NativeScript-Angular provides a custom Angular directive that simplifies the way native `TabView` should be used. The following example shows how to add a `TabView` to your page (with some clarifications later): -HTML * tabItem: This directive uses a JSON object to transfer properties to the native object. Actually, `TabViewItem` is a pretty simple object with just `title`, `iconSource` and `view` properties. Since `title` and `iconSource` are usually represented as text, TabView directive uses a small JSON object (`{title: 'Profile', iconSource: '~/icon.png'}`) to define these properties easily in HTML. The view however, is not so simple, therefore the directive uses the tag where `tabItem` attribute is set as view. Currently, the directive also holds the property `textTransform` which controls the capitalization of the tab title text. See the Styling section for more information. diff --git a/app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.html b/app/ng-ui-widgets-category/tab-view/usage/usage.component.html similarity index 87% rename from app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.html rename to app/ng-ui-widgets-category/tab-view/usage/usage.component.html index fcce68a3..10ddc2f1 100644 --- a/app/ng-ui-widgets-category/tab-view/basics/basic-tab-view.component.html +++ b/app/ng-ui-widgets-category/tab-view/usage/usage.component.html @@ -1,6 +1,6 @@ - + diff --git a/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts b/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts new file mode 100644 index 00000000..671d768b --- /dev/null +++ b/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts @@ -0,0 +1,14 @@ +// >> tab-view-require +import { Component } from "@angular/core"; +import { SelectedIndexChangedEventData } from "tns-core-modules/ui/tab-view"; + +@Component({ + moduleId: module.id, + templateUrl: "./basic-tab-view.component.html" +}) +export class BasicTabViewComponent { + onSelectedIndexchanged(args: SelectedIndexChangedEventData) { + let newIndex = args.newIndex; + } +} +// << tab-view-require From 16ec59f4dcf03230442157489fabc2c86b89a309 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 16:28:33 +0300 Subject: [PATCH 6/8] docs: tslint --- app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts | 2 +- app/ng-ui-widgets-category/tab-view/usage/usage.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts b/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts index efded5ca..5119e005 100644 --- a/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts +++ b/app/ng-ui-widgets-category/tab-view/tab-view-examples.module.ts @@ -2,7 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { TabViewExamplesComponent } from "./tab-view-examples.component"; -import { BasicTabViewComponent } from "./usage/usage.component" +import { BasicTabViewComponent } from "./usage/usage.component"; import { StylingComponent } from "./styling/styling.component"; import { TipsAndTrciksComponent } from "./tips-and-tricks/tips-and-tricks.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; diff --git a/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts b/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts index 671d768b..dd99c3c7 100644 --- a/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts +++ b/app/ng-ui-widgets-category/tab-view/usage/usage.component.ts @@ -6,7 +6,7 @@ import { SelectedIndexChangedEventData } from "tns-core-modules/ui/tab-view"; moduleId: module.id, templateUrl: "./basic-tab-view.component.html" }) -export class BasicTabViewComponent { +export class BasicTabViewComponent { onSelectedIndexchanged(args: SelectedIndexChangedEventData) { let newIndex = args.newIndex; } From 50945ec5f8506450ecf61334ae242c7315248607 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 16:44:02 +0300 Subject: [PATCH 7/8] fix: TabView properties table --- app/ng-ui-widgets-category/tab-view/end.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ng-ui-widgets-category/tab-view/end.md b/app/ng-ui-widgets-category/tab-view/end.md index c02630f3..ac0f1cb7 100644 --- a/app/ng-ui-widgets-category/tab-view/end.md +++ b/app/ng-ui-widgets-category/tab-view/end.md @@ -7,7 +7,7 @@ | `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. Tabs beyond this limit will be recreated from the TabView when needed. | | `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. | -| `iosIconRenderingMode` | _"automatic" | "alwaysOriginal" | "alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. | +| `iosIconRenderingMode` | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. | | `items` | `Array` | Gets or sets the items of the TabView. | | `selectedIndex` | `number` | Gets or sets the selectedIndex of the TabView. | | `selectedTabTextColor` | `Color` | Gets or sets the text color of the selected tab title. | From c72636ae727f731a365d8e7d44636c0f8b1209c3 Mon Sep 17 00:00:00 2001 From: NickIliev Date: Mon, 7 Oct 2019 16:56:37 +0300 Subject: [PATCH 8/8] fix: tabview preopties --- app/ng-ui-widgets-category/tab-view/end.md | 1 - 1 file changed, 1 deletion(-) diff --git a/app/ng-ui-widgets-category/tab-view/end.md b/app/ng-ui-widgets-category/tab-view/end.md index ac0f1cb7..849adcd1 100644 --- a/app/ng-ui-widgets-category/tab-view/end.md +++ b/app/ng-ui-widgets-category/tab-view/end.md @@ -4,7 +4,6 @@ | Name | Type | Description | |:---------|:---------|:---------------| - | `androidOffscreenTabLimit` | `number` | Gets or sets the number of tabs that should be retained to either side of the current tab in the view hierarchy in an idle state. Tabs beyond this limit will be recreated from the TabView when needed. | | `androidSelectedTabHighlightColor` | `Color` | Gets or sets the color of the horizontal line drawn below the currently selected tab on Android. | | `iosIconRenderingMode` | _"automatic"_, _"alwaysOriginal"_, _"alwaysTemplate"_ | Gets or sets the icon rendering mode on iOS. |