diff --git a/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.html b/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.html deleted file mode 100644 index b771b9ee..00000000 --- a/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.ts b/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.ts deleted file mode 100644 index d7aec33b..00000000 --- a/app/ng-ui-widgets-category/progress/creating-progress/creating-progress.component.ts +++ /dev/null @@ -1,27 +0,0 @@ -// >> progress-create-code -import { Component, OnInit } from "@angular/core"; -import { Progress } from "tns-core-modules/ui/progress"; - -@Component({ - moduleId: module.id, - templateUrl: "./creating-progress.component.html", -}) -export class CreatingProgressComponent implements OnInit { - public progressValue: number; - - ngOnInit() { - this.progressValue = 25; - - setInterval(() => { - this.progressValue += 1; - }, 300); - } - - onValueChanged(args) { - let progressBar = args.object; - - console.log("Value changed for " + progressBar); - console.log("New value: " + progressBar.value); - } -} -// << progress-create-code diff --git a/app/ng-ui-widgets-category/progress/end.md b/app/ng-ui-widgets-category/progress/end.md index 753408b2..d2fe61cb 100644 --- a/app/ng-ui-widgets-category/progress/end.md +++ b/app/ng-ui-widgets-category/progress/end.md @@ -1,8 +1,19 @@ +## Properties -**API Reference for** [Progress Class](http://docs.nativescript.org/api-reference/modules/_ui_progress_.html) +| Name | Type | Description | +|----------|---------|----------------| +| `value` | `number` | Gets or sets a progress current value. | +| `maxValue` | `number` | Gets or sets a progress max value. | -**Native Component** +## API References -| Android | iOS | -|:-----------------------|:---------| -| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) (indeterminate = false) | [UIProgressView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView_Class/) | \ No newline at end of file +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/progress](http://docs.nativescript.org/api-reference/modules/_ui_progress_.html) | `Module` | +| [Progress](https://docs.nativescript.org/api-reference/classes/_ui_progress_.progress) | `Class` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| +| [android.widget.ProgressBar](http://developer.android.com/reference/android/widget/ProgressBar.html) | [UIProgressView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIProgressView_Class/) | \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/metadata.md b/app/ng-ui-widgets-category/progress/metadata.md index 15768e32..f650f57c 100644 --- a/app/ng-ui-widgets-category/progress/metadata.md +++ b/app/ng-ui-widgets-category/progress/metadata.md @@ -4,3 +4,4 @@ description: The Progress class provides an abstraction over the iOS's UIProgres position: 34 slug: progress-ng --- +example-order: usage, styling, tips-and-tricks \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/overview.md b/app/ng-ui-widgets-category/progress/overview.md index 589a3884..c0f779e1 100644 --- a/app/ng-ui-widgets-category/progress/overview.md +++ b/app/ng-ui-widgets-category/progress/overview.md @@ -1,2 +1,2 @@ -The Progress widget is a visual bar indicator of a progress in a operation. +The `Progress` widget is a visual bar indicator of a progress in a operation. It shows a bar representing the current progress of the operation. diff --git a/app/ng-ui-widgets-category/progress/progress-examples.component.ts b/app/ng-ui-widgets-category/progress/progress-examples.component.ts index 50d6b551..dcd6c69d 100644 --- a/app/ng-ui-widgets-category/progress/progress-examples.component.ts +++ b/app/ng-ui-widgets-category/progress/progress-examples.component.ts @@ -2,9 +2,9 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Create Progress", "/progress/creating-progress"), - new Link("Set up Progress", "/progress/setting-progress"), - new Link("Style Progress", "/progress/style-progress") + new Link("Usage", "/progress/usage"), + new Link("Style Progress", "/progress/styling"), + new Link("Set up Progress", "/progress/tips-and-tricks") ]; @Component({ diff --git a/app/ng-ui-widgets-category/progress/progress-examples.module.ts b/app/ng-ui-widgets-category/progress/progress-examples.module.ts index ff3495ff..cd7a8e0a 100644 --- a/app/ng-ui-widgets-category/progress/progress-examples.module.ts +++ b/app/ng-ui-widgets-category/progress/progress-examples.module.ts @@ -2,9 +2,9 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { ProgressExamplesComponent } from "./progress-examples.component"; -import { CreatingProgressComponent } from "./creating-progress/creating-progress.component"; -import { SettingProgressComponent } from "./setting-progress/setting-progress.component"; -import { StyleProgressComponent } from "./style-progress/style-progress.component"; +import { UsageComponent } from "./usage/usage.component"; +import { TipsAndTricksComponent } from "./tips-and-tricks/tips-and-tricks.component"; +import { StylingComponent } from "./styling/styling.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -13,19 +13,19 @@ export const routerConfig = [ component: ProgressExamplesComponent }, { - path: "creating-progress", - component: CreatingProgressComponent, - data: { title: "Create Progress" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } }, { - path: "setting-progress", - component: SettingProgressComponent, - data: { title: "Set up Progress" } + path: "tips-and-tricks", + component: TipsAndTricksComponent, + data: { title: "Tips and Tricks" } }, { - path: "style-progress", - component: StyleProgressComponent, - data: { title: "Style Progress" } + path: "styling", + component: StylingComponent, + data: { title: "Styling" } } ]; @@ -39,9 +39,9 @@ export const routerConfig = [ ], declarations: [ ProgressExamplesComponent, - CreatingProgressComponent, - SettingProgressComponent, - StyleProgressComponent + UsageComponent, + TipsAndTricksComponent, + StylingComponent ] }) diff --git a/app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.ts b/app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.ts deleted file mode 100644 index 61573c8c..00000000 --- a/app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -// >> progress-setting-code -import { Component } from "@angular/core"; -import { Progress } from "tns-core-modules/ui/progress"; - -@Component({ - moduleId: module.id, - templateUrl: "./setting-progress.component.html", -}) -export class SettingProgressComponent { - - onProgressBarLoaded(args) { - let myProgressBar = args.object; - - myProgressBar.value = 10; - myProgressBar.maxValue = 200; - - setInterval(function() { - myProgressBar.value += 2; - }, 300); - } - - onValueChanged(args) { - let myProgressBar = args.object; - - console.log("Old Value: " + args.oldValue); - console.log("New Value: " + args.value); - } -} -// << progress-setting-code diff --git a/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.html b/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.html deleted file mode 100644 index 18bf845c..00000000 --- a/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.ts b/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.ts deleted file mode 100644 index 488e054c..00000000 --- a/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// >> progress-create-code -import { Component, OnInit } from "@angular/core"; -import { Progress } from "tns-core-modules/ui/progress"; - -@Component({ - moduleId: module.id, - templateUrl: "./style-progress.component.html", - styleUrls: ["./style-progress.component.css"] -}) -export class StyleProgressComponent implements OnInit { - public progressValue: number; - - ngOnInit() { - this.progressValue = 25; - - setInterval(() => { - this.progressValue += 1; - }, 300); - } - - onValueChanged(args) { - let progressBar = args.object; - - console.log("Value changed for " + progressBar); - console.log("New value: " + progressBar.value); - } -} -// << progress-create-code diff --git a/app/ng-ui-widgets-category/progress/style-progress/article.md b/app/ng-ui-widgets-category/progress/styling/article.md similarity index 58% rename from app/ng-ui-widgets-category/progress/style-progress/article.md rename to app/ng-ui-widgets-category/progress/styling/article.md index c47d3801..9ffde64c 100644 --- a/app/ng-ui-widgets-category/progress/style-progress/article.md +++ b/app/ng-ui-widgets-category/progress/styling/article.md @@ -1,4 +1,2 @@ -The example shows how to style progress component. - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/style-progress/style-progress.component.css b/app/ng-ui-widgets-category/progress/styling/styling.component.css similarity index 100% rename from app/ng-ui-widgets-category/progress/style-progress/style-progress.component.css rename to app/ng-ui-widgets-category/progress/styling/styling.component.css diff --git a/app/ng-ui-widgets-category/progress/styling/styling.component.html b/app/ng-ui-widgets-category/progress/styling/styling.component.html new file mode 100644 index 00000000..d9777738 --- /dev/null +++ b/app/ng-ui-widgets-category/progress/styling/styling.component.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/styling/styling.component.ts b/app/ng-ui-widgets-category/progress/styling/styling.component.ts new file mode 100644 index 00000000..d8f1223b --- /dev/null +++ b/app/ng-ui-widgets-category/progress/styling/styling.component.ts @@ -0,0 +1,16 @@ +// >> progress-create-code +import { Component, OnInit } from "@angular/core"; + +@Component({ + moduleId: module.id, + templateUrl: "./styling.component.html", + styleUrls: ["./styling.component.css"] +}) +export class StylingComponent implements OnInit { + public progressValue: number; + + ngOnInit() { + this.progressValue = 25; + } +} +// << progress-create-code diff --git a/app/ng-ui-widgets-category/progress/setting-progress/article.md b/app/ng-ui-widgets-category/progress/tips-and-tricks/article.md similarity index 81% rename from app/ng-ui-widgets-category/progress/setting-progress/article.md rename to app/ng-ui-widgets-category/progress/tips-and-tricks/article.md index 32869ba9..cfed294f 100644 --- a/app/ng-ui-widgets-category/progress/setting-progress/article.md +++ b/app/ng-ui-widgets-category/progress/tips-and-tricks/article.md @@ -1,5 +1,2 @@ -HTML - -Typescript \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.html b/app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.html similarity index 83% rename from app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.html rename to app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.html index 0c18ec10..1abd9912 100644 --- a/app/ng-ui-widgets-category/progress/setting-progress/setting-progress.component.html +++ b/app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.html @@ -4,7 +4,7 @@ + class="progress"> diff --git a/app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.ts b/app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.ts new file mode 100644 index 00000000..cb4937e0 --- /dev/null +++ b/app/ng-ui-widgets-category/progress/tips-and-tricks/tips-and-tricks.component.ts @@ -0,0 +1,30 @@ +// >> progress-setting-code +import { Component } from "@angular/core"; +import { Progress } from "tns-core-modules/ui/progress"; + +@Component({ + moduleId: module.id, + templateUrl: "./tips-and-tricks.component.html", +}) +export class TipsAndTricksComponent { + onProgressBarLoaded(args) { + let myProgressBar = args.object as Progress; + + myProgressBar.value = 10; // Initial value + myProgressBar.maxValue = 100; // Maximum value + + // Forcing progress value change (for demonstration) + setInterval(() => { + myProgressBar.value += 2; + }, 1000); + } + + onValueChanged(args) { + let myProgressBar = args.object as Progress; + + // TIP: args (for valueChange of Progress) is extending EventData with oldValue & value parameters + console.log("Old Value: " + args.oldValue); + console.log("New Value: " + args.value); + } +} +// << progress-setting-code diff --git a/app/ng-ui-widgets-category/progress/creating-progress/article.md b/app/ng-ui-widgets-category/progress/usage/article.md similarity index 81% rename from app/ng-ui-widgets-category/progress/creating-progress/article.md rename to app/ng-ui-widgets-category/progress/usage/article.md index aed0db7a..e974ffff 100644 --- a/app/ng-ui-widgets-category/progress/creating-progress/article.md +++ b/app/ng-ui-widgets-category/progress/usage/article.md @@ -1,5 +1,2 @@ -HTML - -Typescript \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/usage/usage.component.html b/app/ng-ui-widgets-category/progress/usage/usage.component.html new file mode 100644 index 00000000..cfc30dbc --- /dev/null +++ b/app/ng-ui-widgets-category/progress/usage/usage.component.html @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/progress/usage/usage.component.ts b/app/ng-ui-widgets-category/progress/usage/usage.component.ts new file mode 100644 index 00000000..47d50fff --- /dev/null +++ b/app/ng-ui-widgets-category/progress/usage/usage.component.ts @@ -0,0 +1,17 @@ +// >> progress-create-code +import { Component } from "@angular/core"; +import { EventData } from "tns-core-modules/data/observable"; +import { Progress } from "tns-core-modules/ui/progress"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html", +}) +export class UsageComponent { + + onValueChanged(args: EventData) { + let progressBar = args.object as Progress; + console.log("New value: " + progressBar.value); + } +} +// << progress-create-code diff --git a/app/ng-ui-widgets-category/scroll-view/end.md b/app/ng-ui-widgets-category/scroll-view/end.md index 8d98076c..a795d8c0 100644 --- a/app/ng-ui-widgets-category/scroll-view/end.md +++ b/app/ng-ui-widgets-category/scroll-view/end.md @@ -1,2 +1,26 @@ +## Properties -**API Reference for the** [ScrollView Class](http://docs.nativescript.org/api-reference/modules/_ui_scroll_view_.html) +| Name | Type | Description | +|----------|---------|----------------| +| `orientation` | [`Orientation`](https://docs.nativescript.org/api-reference/modules/_ui_scroll_view_#orientation) | Gets or sets direction in which the content can be scrolled. Supported values are _"vertical"_ (default) and _"horizontal"_. | + +## Events + +| Name | Description | +|----------|----------------| +| `scroll` | Emitted when the component is scrolled. | + +## API References + +| Name | Type | +|----------|---------| +| [tns-core-modules/ui/scroll-view](http://docs.nativescript.org/api-reference/modules/_ui_scroll_view_.html) | `Module` | +| [ScrollView](https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview) | `Class` | +| [orientation](https://docs.nativescript.org/api-reference/classes/_ui_scroll_view_.scrollview#orientation) |`Property`| +| [ScrollEventData](https://docs.nativescript.org/api-reference/interfaces/_ui_scroll_view_.scrolleventdata) | `Interface` | + +## Native Component + +| Android | iOS | +|:----------------------|:---------| +| _NativeScript specific implementation_ | _NativeScript specific implementation_ | \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/horizontal/article.md b/app/ng-ui-widgets-category/scroll-view/horizontal/article.md deleted file mode 100644 index 59c11e6a..00000000 --- a/app/ng-ui-widgets-category/scroll-view/horizontal/article.md +++ /dev/null @@ -1,2 +0,0 @@ -Set ScrollView with `horizontal` orientation. - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.html b/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.html deleted file mode 100644 index ce9dc041..00000000 --- a/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.ts b/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.ts deleted file mode 100644 index 85ebebbc..00000000 --- a/app/ng-ui-widgets-category/scroll-view/horizontal/scroll-view-horizontal.component.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./scroll-view-horizontal.component.html" -}) -export class ScrollViewHorizontalComponent { -} diff --git a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/article.md b/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/article.md deleted file mode 100644 index 47f9a1a7..00000000 --- a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/article.md +++ /dev/null @@ -1,4 +0,0 @@ -The `isScrollEnabled` property allows you to enable/disable the scroll view of the ScrollView component. The example shows how to bind the property and how to toggle its value. - - - diff --git a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.html b/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.html deleted file mode 100644 index 94a8cae1..00000000 --- a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.ts b/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.ts deleted file mode 100644 index 23c6ad4b..00000000 --- a/app/ng-ui-widgets-category/scroll-view/is-scroll-enabled/is-scroll-enabled.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./is-scroll-enabled.component.html" -}) -export class ScrollViewIsEnabledComponent { - // >> scroll-view-is-enabled-code - scrollEnabled: boolean = true; - - onTap() { - this.scrollEnabled = !this.scrollEnabled; - } - // << scroll-view-is-enabled-code -} diff --git a/app/ng-ui-widgets-category/scroll-view/metadata.md b/app/ng-ui-widgets-category/scroll-view/metadata.md index 6ef2dc1a..29c7b69b 100644 --- a/app/ng-ui-widgets-category/scroll-view/metadata.md +++ b/app/ng-ui-widgets-category/scroll-view/metadata.md @@ -4,3 +4,4 @@ description: ScrollView class allows displaying scrollable area, which has conte position: 36 slug: scroll-view-ng --- +example-order: usage, tips-and-tricks diff --git a/app/ng-ui-widgets-category/scroll-view/overview.md b/app/ng-ui-widgets-category/scroll-view/overview.md index 73665a7a..27d08b4f 100644 --- a/app/ng-ui-widgets-category/scroll-view/overview.md +++ b/app/ng-ui-widgets-category/scroll-view/overview.md @@ -1,44 +1,2 @@ The ScrollableView component allows you to display a scrollable area in your application, which has content that is larger than its bounds. The ScrollView has an `orientation` property, which allows you to set different orientations to the view: - -The possible values of `orientation` are: - - `horizontal` - - `vertical` - -It is possible to handle the `scroll` event of the View by binding to the ScrollView’s `scroll` event. - -> Note: Using `ScrollView` in `ScrollView`, `ListView` in a `ScrollView` or `ScrollView` in the `ListView`'s items can lead to a poor user interface performance and can reflect the user experience. For avoiding those issues, we should specify the height explicitly for the `ListView` in the scenario when the `ListView` is nested in `ScrollView`, the `ScrollView`'s height - when the component is used inside the `ListView` and the child ScrollView's height in `ScrollView` in `ScrollView` scenario. -Example 1 (`ListView` in `ScrollView`): -```HTML - - - - - - - - - -``` -Example 2 (`ScrollView` in `ListView`): -```HTML - - - - - - - - - -``` -Example 3 (`ScrollView` in `ScrollView`): -```HTML - - - - - - - -``` diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-event/article.md b/app/ng-ui-widgets-category/scroll-view/scroll-event/article.md deleted file mode 100644 index 6cbf0b5e..00000000 --- a/app/ng-ui-widgets-category/scroll-view/scroll-event/article.md +++ /dev/null @@ -1,7 +0,0 @@ -## Scroll events - -CSS - - -TypeScript - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.html b/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.html deleted file mode 100644 index 4df739ec..00000000 --- a/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.ts b/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.ts deleted file mode 100644 index 17268c2d..00000000 --- a/app/ng-ui-widgets-category/scroll-view/scroll-event/scroll-event.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -// >> scroll-view-event-code -import { Component } from "@angular/core"; -import { setTimeout } from "tns-core-modules/timer"; -import { ScrollEventData } from "tns-core-modules/ui/scroll-view"; - -@Component({ - moduleId: module.id, - // >> (hide) - styleUrls: ["./style.css"], - // << (hide) - templateUrl: "./scroll-event.component.html" -}) -export class ScrollEventComponent { - - public status = "not scrolling"; - - public onScroll(args: ScrollEventData) { - this.status = "scrolling"; - - setTimeout(() => { - this.status = "not scrolling"; - }, 300); - - console.log("scrollX: " + args.scrollX); - console.log("scrollY: " + args.scrollY); - } -} -// << scroll-view-event-code diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.component.ts b/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.component.ts index a0993229..14fa446e 100644 --- a/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.component.ts +++ b/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.component.ts @@ -2,10 +2,8 @@ import { Component, ChangeDetectionStrategy } from "@angular/core"; import { Link } from "./../../link"; let menuLinks = [ - new Link("Horizontal orientation", "/scroll-view/horizontal"), - new Link("Vertical orientation", "/scroll-view/vertical"), - new Link("Scroll event", "/scroll-view/scroll-event"), - new Link("Enable/Disable scroll", "/scroll-view/is-scroll-enabled") + new Link("Usage", "/scroll-view/usage"), + new Link("Tips and Tricks", "/scroll-view/tips-and-tricks"), ]; @Component({ diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.module.ts b/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.module.ts index 4a8f5575..b94b045d 100644 --- a/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.module.ts +++ b/app/ng-ui-widgets-category/scroll-view/scroll-view-examples.module.ts @@ -2,10 +2,8 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core"; import { NativeScriptRouterModule } from "nativescript-angular/router"; import { NativeScriptCommonModule } from "nativescript-angular/common"; import { ScrollViewExamplesComponent } from "./scroll-view-examples.component"; -import { ScrollViewHorizontalComponent } from "./horizontal/scroll-view-horizontal.component"; -import { ScrollViewVerticalComponent } from "./vertical/scroll-view-vertical.component"; -import { ScrollEventComponent } from "./scroll-event/scroll-event.component"; -import { ScrollViewIsEnabledComponent } from "./is-scroll-enabled/is-scroll-enabled.component"; +import { UsageComponent } from "./usage/usage.component"; +import { TipsAndTricksComponent } from "./tips-and-tricks/tips-and-tricks.component"; import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module"; export const routerConfig = [ @@ -14,24 +12,14 @@ export const routerConfig = [ component: ScrollViewExamplesComponent }, { - path: "horizontal", - component: ScrollViewHorizontalComponent, - data: { title: "Horizontal orientation" } + path: "usage", + component: UsageComponent, + data: { title: "Usage" } }, { - path: "vertical", - component: ScrollViewVerticalComponent, - data: { title: "Vertical orientation" } - }, - { - path: "scroll-event", - component: ScrollEventComponent, - data: { title: "Scroll event" } - }, - { - path: "is-scroll-enabled", - component: ScrollViewIsEnabledComponent, - data: { title: "Enable/Disable scroll" } + path: "tips-and-tricks", + component: TipsAndTricksComponent, + data: { title: "Tips and Tricks" } } ]; @@ -45,10 +33,8 @@ export const routerConfig = [ ], declarations: [ ScrollViewExamplesComponent, - ScrollViewHorizontalComponent, - ScrollViewVerticalComponent, - ScrollEventComponent, - ScrollViewIsEnabledComponent + UsageComponent, + TipsAndTricksComponent ] }) diff --git a/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/article.md b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/article.md new file mode 100644 index 00000000..59fb345c --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/article.md @@ -0,0 +1,50 @@ +### Scroll Event + +Using `scroll` event to track the scroll position via `scrollX` and `scrollY` from `ScrollEventData`. + + + + +### Performance Tips + +Using `ScrollView` in `ScrollView`, `ListView` in a `ScrollView` or `ScrollView` in the `ListView`'s items can lead to a **poor** user interface performance and can reflect the user experience. For avoiding those issues, we should specify the height explicitly for the `ListView` in the scenario when the `ListView` is nested in `ScrollView`, the `ScrollView`'s height - when the component is used inside the `ListView` and the child ScrollView's height in `ScrollView` in `ScrollView` scenario. + +Example 1 (`ListView` in `ScrollView`): +```HTML + + + + + + + + + + +``` + +Example 2 (`ScrollView` in `ListView`): +```HTML + + + + + + + + + + +``` + +Example 3 (`ScrollView` in `ScrollView`): +```HTML + + + + + + + + +``` \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/scroll-event/style.css b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/style.css similarity index 100% rename from app/ng-ui-widgets-category/scroll-view/scroll-event/style.css rename to app/ng-ui-widgets-category/scroll-view/tips-and-tricks/style.css diff --git a/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.html b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.html new file mode 100644 index 00000000..a8e4e20f --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.ts b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.ts new file mode 100644 index 00000000..6292cf54 --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/tips-and-tricks/tips-and-tricks.component.ts @@ -0,0 +1,21 @@ +// >> scroll-view-event-code +import { Component } from "@angular/core"; +import { ScrollView, ScrollEventData } from "tns-core-modules/ui/scroll-view"; + +@Component({ + moduleId: module.id, + // >> (hide) + styleUrls: ["./style.css"], + // << (hide) + templateUrl: "./tips-and-tricks.component.html" +}) +export class TipsAndTricksComponent { + + onScroll(args: ScrollEventData) { + const scrollView = args.object as ScrollView; + + console.log("scrollX: " + args.scrollX); + console.log("scrollY: " + args.scrollY); + } +} +// << scroll-view-event-code diff --git a/app/ng-ui-widgets-category/scroll-view/usage/article.md b/app/ng-ui-widgets-category/scroll-view/usage/article.md new file mode 100644 index 00000000..f9f13573 --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/usage/article.md @@ -0,0 +1 @@ + diff --git a/app/ng-ui-widgets-category/scroll-view/usage/usage.component.html b/app/ng-ui-widgets-category/scroll-view/usage/usage.component.html new file mode 100644 index 00000000..5d5108ce --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/usage/usage.component.html @@ -0,0 +1,22 @@ + + + + + + + + + + + ß + + + + + + + + \ No newline at end of file diff --git a/app/ng-ui-widgets-category/scroll-view/usage/usage.component.ts b/app/ng-ui-widgets-category/scroll-view/usage/usage.component.ts new file mode 100644 index 00000000..7c945470 --- /dev/null +++ b/app/ng-ui-widgets-category/scroll-view/usage/usage.component.ts @@ -0,0 +1,7 @@ +import { Component } from "@angular/core"; + +@Component({ + moduleId: module.id, + templateUrl: "./usage.component.html" +}) +export class UsageComponent { } diff --git a/app/ng-ui-widgets-category/scroll-view/vertical/article.md b/app/ng-ui-widgets-category/scroll-view/vertical/article.md deleted file mode 100644 index a7827ad8..00000000 --- a/app/ng-ui-widgets-category/scroll-view/vertical/article.md +++ /dev/null @@ -1,2 +0,0 @@ -Set ScrollView with `vertical` orientation. - diff --git a/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.html b/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.html deleted file mode 100644 index 9d47393f..00000000 --- a/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.ts b/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.ts deleted file mode 100644 index 98442a28..00000000 --- a/app/ng-ui-widgets-category/scroll-view/vertical/scroll-view-vertical.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - moduleId: module.id, - templateUrl: "./scroll-view-vertical.component.html" -}) -export class ScrollViewVerticalComponent { }