docs: Tabs examples

NickIliev · NickIliev · commit 6bb46682a051 · 2019-07-09T14:35:38.000+03:00
diff --git a/app/app.component.ts b/app/app.component.ts
@@ -6,9 +6,7 @@ import { DeepLinkData } from "./shared/deep-link-data";
 @Component({
     moduleId: module.id,
     selector: "sdk-app",
-    template: `
-        <page-router-outlet></page-router-outlet>
-    `
+    template: `<page-router-outlet></page-router-outlet>`
 })
 
 export class AppComponent implements AfterViewInit {
diff --git a/app/app.routes.ts b/app/app.routes.ts
@@ -125,6 +125,11 @@ export const routes = [
         loadChildren: "./ng-ui-widgets-category/bottom-navigation/bottom-navigation-examples.module#BottomNavigationExamplesModule",
         data: { title: "Bottom Navigation" }
     },
+    {
+        path: "tabs",
+        loadChildren: "./ng-ui-widgets-category/tabs/tabs-examples.module#TabsExamplesModule",
+        data: { title: "Tabs" }
+    },
     {
         path: "text-field",
         loadChildren: "./ng-ui-widgets-category/text-field/text-field-examples.module#TextFieldExamplesModule",
diff --git a/app/examples-list.component.ts b/app/examples-list.component.ts
@@ -18,6 +18,7 @@ let mainMenuLinks = [
     new Link("Switch", "/switch"),
     new Link("TabView", "/tab-view"),
     new Link("BottomNavigation", "/bottom-navigation"),
+    new Link("Tabs", "/tabs"),
     new Link("TextField", "/text-field"),
     new Link("TextView", "/text-view"),
     new Link("WebView", "/web-view"),
diff --git a/app/ng-ui-widgets-category/bottom-navigation/metadata.md b/app/ng-ui-widgets-category/bottom-navigation/metadata.md
@@ -1,7 +1,7 @@
 ---
 title: BottomNavigation
 description: The NativeScript's BottomNavigation component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms.  The recommended scenario suitable for BottomNavigation is a high level navigaiton with 3 to 5 tabs each with separate function.
-position: 44
+position: 42
 slug: bottom-navigation-ng
 ---
 example-order: usage, theming, properties, events, tips-and-tricks
diff --git a/app/ng-ui-widgets-category/tabs/end.md b/app/ng-ui-widgets-category/tabs/end.md
@@ -0,0 +1,7 @@
+**API Reference for the** [Tabs Class](https://docs.nativescript.org/api-reference/classes/_ui_tab_view_.tabs)
+
+**Native Component**
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [ViewPager](https://developer.android.com/reference/android/support/v4/view/ViewPager) | [UIPageViewController](https://developer.apple.com/documentation/uikit/uipageviewcontroller?language=objc) | 
diff --git a/app/ng-ui-widgets-category/tabs/events/article.md b/app/ng-ui-widgets-category/tabs/events/article.md
@@ -0,0 +1,5 @@
+- `selectedIndexChanged` - Event used to track the tabs interaction though the change of `selectedIndex` property of `Tabs` component. The event data is of type `SelectedIndexChangedEventData` extends `EventData` with two new properties:
+    - `oldIndex` - Provides the old selected index.
+    - `newIndwex` - Provides the new selected index.
+
+<snippet id='tabs-events-ng'/>
diff --git a/app/ng-ui-widgets-category/tabs/events/events.component.html b/app/ng-ui-widgets-category/tabs/events/events.component.html
@@ -0,0 +1,23 @@
+<Tabs [selectedIndex]="selectedIndex" (loaded)="onTabsLoaded($event)">
+
+    <!-- The Tabs tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+    <TabStrip>
+        <TabStripItem title="Home" iconSource="res://baseline_home_black_24pt"></TabStripItem>
+        <TabStripItem title="Account" iconSource="res://baseline_account_balance_black_24pt"></TabStripItem>
+    </TabStrip>
+
+    <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+    <TabContentItem>
+        <GridLayout rows="*, *">
+            <Label row="0" text="Home Page" class="h2 text-center" color="orangered"></Label>
+            <Label row="1" [text]="selectedIndex" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+    <TabContentItem>
+        <GridLayout rows="*, *">
+            <Label row="0" text="Account Page" class="h2 text-center"></Label>
+            <Label row="1" [text]="selectedIndex" class="h2 text-center"></Label>
+        </GridLayout>
+    </TabContentItem>
+</Tabs>
+ 
diff --git a/app/ng-ui-widgets-category/tabs/events/events.component.ts b/app/ng-ui-widgets-category/tabs/events/events.component.ts
@@ -0,0 +1,31 @@
+// >> bottom-navigation-events-ng
+import { Component, NgZone } from "@angular/core";
+import { EventData } from "tns-core-modules/data/observable";
+import { Tabs, SelectedIndexChangedEventData } from "tns-core-modules/ui/tabs";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./events.component.html"
+})
+export class EventsComponent {
+    selectedIndex: number = 1;
+
+    constructor(private _zone: NgZone) { }
+
+    onTabsLoaded(args: EventData) {
+        // Using the loaded event to ger a reference to the Tabs
+        const tabs = args.object as Tabs;
+
+        // Using selectedIndexChanged
+        tabs.on(Tabs.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
+            const oldIndex: number = data.oldIndex;
+            const newIndex: number = data.newIndex;
+            console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
+
+            this._zone.run(() => {
+                this.selectedIndex = newIndex;
+            })
+        });
+    }
+}
+// << bottom-navigation-events-ng
diff --git a/app/ng-ui-widgets-category/tabs/metadata.md b/app/ng-ui-widgets-category/tabs/metadata.md
@@ -0,0 +1,7 @@
+---
+title: Tabs
+description: The NativeScript's Tabs component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms.  The recommended scenario suitable for BottomNavigation is a mid level navigaiton with unlimited tabs and common functions.The component supports swipe gestures and preloading.
+position: 42
+slug: tabs-ng
+---
+example-order: usage, theming, properties, events
diff --git a/app/ng-ui-widgets-category/tabs/overview.md b/app/ng-ui-widgets-category/tabs/overview.md
@@ -0,0 +1,13 @@
+> **Disclaimer:** The `Tabs` component is currently in **Beta** version. The component is being actively developed - use [the tracking issue](https://github.com/NativeScript/NativeScript/issues/6967) for details about the ongoing implementation.
+
+The `Tabs` component provides a simple way to navigate between different views while providing common UI for both iOS and Android platforms.  The recommended scenario suitable for `Tabs` is a mid level navigation. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/tabs.html#usage).
+
+> **Note:** NativeScript 6 introduced two new UI components called `BottomNavigation` and `Tabs`. The idea behind them is to provide more control when building tab based UI, while powering the CSS styling, the icon font support and other specific functionalities. Prior to NativeScript 6, we had the `TabView` component which had top and bottom implementations with different behavoirs for the different platofrms and some styling limitations. With `BottomNavigaiton` and `Tabs` coomponents available, the `TabView` can be considered obsolete.
+
+The `Tabs` component roundup
+
+- Semantic: Mid Level Navigation
+- Usage: Unlimited Tabs with common function
+- Transitions: Slide Transition indicating the relative position to each other
+- Gestures: Swipe Gesture
+- Preloading: At least 1 to the sides (because of the swipe gesture)
diff --git a/app/ng-ui-widgets-category/tabs/properties/article.md b/app/ng-ui-widgets-category/tabs/properties/article.md
@@ -0,0 +1,29 @@
+
+- `items: Array<TabContentItem>;` - Gets or sets the items of the BottomNavigation.
+
+- `tabStrip: TabStrip;` - Gets or sets the tab strip of the BottomNavigation.
+
+- `selectedIndex: number;` - Gets or sets the selectedIndex of the BottomNavigation.
+
+- `swipeEnabled: boolean;` - Gets or sets the swipe enabled state of the Tabs.
+
+- `offscreenTabLimit: number;` - Gets or sets the number of offscreen preloaded tabs of the Tabs.
+
+    Example:
+
+    - Let's assume that the TabContentItem[1] is selected (`selectedIndex = 1`) and `offscreenTabLimit` is set to 1.
+
+        **Result:** The content for TabContentItem[0] and TabContentItem[2] will be pre-loaded.
+
+    - Select TabContentItem[2] (`selectedIndex = 2`).
+
+        **Result:** TabContentItem[0] will be unloaded and TabContentItem[3] will be pre-loaded.
+
+- `tabsPosition: "top" | "bottom";` - Gets or sets the position state of the Tabs.
+
+- `android: any` /* android.view.View */; - Gets the native [android widget](http://developer.android.com/reference/android/support/v4/view/ViewPager.html) that represents the user interface for this component. Valid only when running on Android OS.
+
+- `ios: any` /* UIPageViewController */; - Gets the native iOS [UIPageViewController](https://developer.apple.com/documentation/uikit/uipageviewcontroller?language=objc) that represents the user interface for this component. Valid only when running on iOS.
+
+<snippet id='tabs-properties-ng'/>
+<snippet id='tabs-properties-ng-html'>
diff --git a/app/ng-ui-widgets-category/tabs/properties/properties.component.html b/app/ng-ui-widgets-category/tabs/properties/properties.component.html
@@ -0,0 +1,3 @@
+<!-- >> tabs-properties-ng-html -->
+<Tabs (loaded)="onTabsLoaded($event)"></Tabs>
+<!-- << tabs-properties-ng-html -->
diff --git a/app/ng-ui-widgets-category/tabs/properties/properties.component.ts b/app/ng-ui-widgets-category/tabs/properties/properties.component.ts
@@ -0,0 +1,104 @@
+// >> tabs-properties-ng
+import { Component } from "@angular/core";
+import { Label } from "tns-core-modules/ui/label";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Color } from "tns-core-modules/color/color";
+import { EventData } from "tns-core-modules/data/observable";
+import { Tabs, TabStrip, TabStripItem, TabContentItem } from "tns-core-modules/ui/tabs";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./properties.component.html"
+})
+export class PropertiesComponent {
+
+    onTabsLoaded(args: EventData) {
+        const tabs = args.object as Tabs;
+
+        /*
+            Using the items property to assign array of TabContentItem componentns
+            Note: The number of TabContentItem components should be equal to the number of TabStripItem components
+        */
+        const tabContentItemsArray: Array<TabContentItem> = this.createTabsContentArray();
+        tabs.items = tabContentItemsArray;
+
+        /*
+            Using the tabStrip property to createa a TabStrip with multiple TabStripItems (tabs)
+            Note: The number of TabStripItem components should be equal to the number of TabContentItem components
+        */
+        const tabStrip = this.createTabStrip();
+        tabs.tabStrip = tabStrip;
+
+        /*
+            Using the Tabs properties
+        */
+        tabs.selectedIndex = 1;
+        tabs.swipeEnabled = true;
+        tabs.offscreenTabLimit = 1;
+        tabs.tabsPosition = "top";
+
+        console.log(tabs.nativeView);
+    }
+    // << tabs-properties-tsc
+
+    createTabStrip() {
+        const tabStrip: TabStrip = new TabStrip();
+        tabStrip.iosIconRenderingMode = "automatic"; // iOS only (automatic is the default value)
+        const tabStripItems: Array<TabStripItem> = [];
+        for (let index = 0; index < 5; index++) {
+            const item: TabStripItem = new TabStripItem();
+            /*
+                Using TabStripItem title property
+            */
+            item.title = `Tab ${index + 1}`;
+            /*
+                Using TabStripItem title property
+            */
+            item.iconSource = index === 0
+                ? "res://baseline_home_black_24pt"
+                : (index === 1
+                    ? "res://baseline_account_balance_black_24pt"
+                    : "res://baseline_search_black_24pt");
+            tabStripItems.push(item);
+        }
+        tabStrip.items = tabStripItems;
+
+        return tabStrip;
+    }
+
+    createTabsContentArray() {
+        const arr: Array<TabContentItem> = [];
+        for (let index = 0; index < 5; index++) {
+            const item: TabContentItem = new TabContentItem();
+            // The createContent is a custom method that returns a StackLayout with a Label as a chils
+            item.view = this.createContent(index);
+            arr.push(item);
+        }
+
+        return arr;
+    }
+
+    // >> (hide)
+    createContent(index: number) {
+        const label = new Label();
+        label.text = `Content ${index + 1}`;
+        label.className = "h2 text-center";
+        label.color = new Color("red");
+        label.id = "label";
+        const stack = new StackLayout();
+        stack.verticalAlignment = "middle";
+        stack.addChild(label);
+
+        stack.on("loaded", (args) => {
+            console.log(`Loaded [${(<any>args.object).getViewById("label").text}]`);
+        });
+
+        stack.on("unloaded", (args) => {
+            console.log(`UNLOADED [${(<any>args.object).getViewById("label").text}]`);
+        });
+
+        return stack;
+    }
+    // << (hide)
+}
+// << tabs-properties-ng
diff --git a/app/ng-ui-widgets-category/tabs/tabs-examples.component.ts b/app/ng-ui-widgets-category/tabs/tabs-examples.component.ts
@@ -0,0 +1,26 @@
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { Link } from "../../link";
+
+let menuLinks = [
+    new Link("Events", "/tabs/events"),
+    new Link("Usage", "/tabs/usage"),
+    new Link("Properties", "/tabs/properties"),
+    new Link("Theming", "/tabs/theming")
+];
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./../../examples-list.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TabsExamplesComponent {
+    public links: Array<Link>;
+
+    constructor() {
+        this.links = [];
+
+        for (let i = 0; i < menuLinks.length; i++) {
+            this.links.push(menuLinks[i]);
+        }
+    }
+}
diff --git a/app/ng-ui-widgets-category/tabs/tabs-examples.module.ts b/app/ng-ui-widgets-category/tabs/tabs-examples.module.ts
@@ -0,0 +1,58 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NativeScriptFormsModule } from "nativescript-angular/forms";
+import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
+
+import { TabsExamplesComponent } from "./tabs-examples.component";
+import { UsageComponent } from "./usage/usage.component";
+import { ThemingComponent } from "./theming/theming.component";
+import { EventsComponent } from "./events/events.component";
+import { PropertiesComponent } from "./properties/properties.component";
+
+export const routerConfig = [
+    {
+        path: "",
+        component: TabsExamplesComponent
+
+    },
+    {
+        path: "usage",
+        component: UsageComponent,
+        data: { title: "Usage" }
+    },
+    {
+        path: "theming",
+        component: ThemingComponent,
+        data: { title: "Theming" }
+    },
+    {
+        path: "events",
+        component: EventsComponent,
+        data: { title: "Events" }
+    },
+    {
+        path: "properties",
+        component: PropertiesComponent,
+        data: { title: "Properties" }
+    }
+];
+@NgModule({
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [
+        TitleAndNavButtonModule,
+        NativeScriptCommonModule,
+        NativeScriptRouterModule,
+        NativeScriptFormsModule,
+        NativeScriptRouterModule.forChild(routerConfig)
+    ],
+    declarations: [
+        TabsExamplesComponent,
+        EventsComponent,
+        UsageComponent,
+        PropertiesComponent,
+        ThemingComponent
+    ]
+})
+
+export class TabsExamplesModule { }
diff --git a/app/ng-ui-widgets-category/tabs/theming/article.md b/app/ng-ui-widgets-category/tabs/theming/article.md
@@ -0,0 +1,3 @@
+> **Note:** - The integration with `nativescript-theme` and the support for custom CSS is currently under development and is on its way.
+
+<snippet id='tabs-theming-css-ng'/>
diff --git a/app/ng-ui-widgets-category/tabs/theming/theming.component.css b/app/ng-ui-widgets-category/tabs/theming/theming.component.css
@@ -0,0 +1,28 @@
+/* >> tabs-theming-css-ng */
+Tabs.bottom-nav {
+    background-color: orangered;
+    color: gold;
+    font-size: 24;
+}
+
+TabStripItem.tabstripitem-active {
+    background-color: teal;
+}
+
+TabStripItem.tabstripitem-active:active {
+    background-color: yellowgreen;
+} 
+
+TabContentItem.first-tabcontent {
+    background-color: seashell;
+    color: olive;
+}
+TabContentItem.second-tabcontent {
+    background-color: slategray;
+    color: aquamarine;
+}
+TabContentItem.third-tabcontent {
+    background-color: blueviolet;
+    color: antiquewhite;
+}
+/* << tabs-theming-css-ng */
diff --git a/app/ng-ui-widgets-category/tabs/theming/theming.component.html b/app/ng-ui-widgets-category/tabs/theming/theming.component.html
diff --git a/app/ng-ui-widgets-category/tabs/theming/theming.component.ts b/app/ng-ui-widgets-category/tabs/theming/theming.component.ts
diff --git a/app/ng-ui-widgets-category/tabs/usage/article.md b/app/ng-ui-widgets-category/tabs/usage/article.md
diff --git a/app/ng-ui-widgets-category/tabs/usage/usage.component.html b/app/ng-ui-widgets-category/tabs/usage/usage.component.html
diff --git a/app/ng-ui-widgets-category/tabs/usage/usage.component.ts b/app/ng-ui-widgets-category/tabs/usage/usage.component.ts
