docs: BottomNavigation & Tabs Examples

.eslintrc

@@ -100,7 +100,7 @@
         "no-multi-str": "error",
         "no-multiple-empty-lines": "error",
         "no-negated-condition": "off",
-        "no-nested-ternary": "error",
+        "no-nested-ternary": "off",
         "no-new": "error",
         "no-new-func": "error",
         "no-new-object": "error",

.gitignore

@@ -8,6 +8,7 @@ report
 
 app/**/*.map
 app/**/*-ts-*.js
+.migration_backup/
 
 .DS_Store
 **/*.log

.migration_backup/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "nativescript-sdk-examples-js",
+  "description": "NativeScript SDK Examples",
+  "author": "Telerik <support@telerik.com>",
+  "version": "0.1.0",
+  "homepage": "https://github.com/NativeScript/nativescript-sdk-examples-js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NativeScript/nativescript-sdk-examples-js"
+  },
+  "bugs": {
+    "url": "https://github.com/NativeScript/nativescript-sdk-examples-js/issues"
+  },
+  "keywords": [
+    "NativeScript",
+    "JavaScript",
+    "SDK",
+    "example",
+    "documentation"
+  ],
+  "license": "Apache-2.0",
+  "nativescript": {
+    "id": "org.nativescript.nativescriptsdkexamplesjs",
+    "tns-android": {
+      "version": "6.0.0"
+    },
+    "tns-ios": {
+      "version": "6.0.0"
+    }
+  },
+  "dependencies": {
+    "nativescript-theme-core": "~1.0.4",
+    "tns-core-modules": "6.0.1"
+  },
+  "devDependencies": {
+    "eslint": "~5.9.0",
+    "fs-extra": "^0.30.0",
+    "markdown-snippet-injector": "^0.2.4",
+    "nativescript-dev-webpack": "1.0.0",
+    "tar.gz": "^1.0.7",
+    "tns-platform-declarations": "6.0.1",
+    "tslint": "5.11.0",
+    "typescript": "3.4.1"
+  },
+  "scripts": {
+    "lint": "eslint \"app/**/*.js\"",
+    "tslint": "tslint -p tsconfig.json",
+    "tsc": "tsc",
+    "build": "node scripts/build.js",
+    "archive": "node scripts/archive.js",
+    "inject": "mdinject --root=app --docsroot=dist/cookbook --sourceext=\".js|.ts|.css|.xml\" --snippettitles=\"JavaScript|TypeScript|CSS|XML\"",
+    "pretsc": "npm install",
+    "pretslint": "npm run tsc",
+    "prelint": "npm run tslint",
+    "prebuild": "npm run lint",
+    "postbuild": "npm run inject && npm run archive",
+    "e2e": "mocha --opts ./e2e/config/mocha.opts",
+    "update-webpack": "./node_modules/.bin/update-ns-webpack --deps --configs"
+  }
+}

.migration_backup/tsconfig.tns.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig",
+    "compilerOptions": {
+        "module": "es2015",
+        "moduleResolution": "node"
+    }
+}

app/main-page.js

@@ -50,7 +50,9 @@ const navigationLinks = [
     new link("ImageSource", "ns-framework-modules-category/image-source/image-source-page"),
     new link("File System", "ns-framework-modules-category/file-system/file-system-page"),
     new link("Modal view", "ns-ui-category/modal-view/modal-view-examples-page"),
-    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page")
+    new link("XML Parser", "ns-framework-modules-category/xml-parser/xml-parser-page"),
+    new link("BottomNavigation", "ns-ui-widgets-category/bottom-navigation/bottom-navigation-page"),
+    new link("Tabs", "ns-ui-widgets-category/tabs/tabs-page")
 ];
 
 function onNavigatingTo(args) {

app/ns-ui-category/icon-fonts/basics/basics-page.xml

@@ -23,5 +23,8 @@
         <!-- Using IcoMoon-Free.ttf -->
         <Label text="&#xe904;" class="ico"/>
         <!-- << icon-font-xml-def -->
+
+        <!-- Using font icons in Images requires the font:// prefix -->
+        <Image src="font://&#xf019;" class="far"></Image>
     </StackLayout>
 </Page>

app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.js

@@ -0,0 +1,28 @@
+const ListViewLinksModel = require("../../links-view-model");
+const link = require("../../link");
+const navigationLinks = [
+    new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-page"),
+    new link("Theming", "ns-ui-widgets-category/bottom-navigation/theming/theming-page"),
+    new link("Events", "ns-ui-widgets-category/bottom-navigation/events/events-page"),
+    new link("Properties", "ns-ui-widgets-category/bottom-navigation/properties/properties-page"),
+    new link("Tips & Tricks", "ns-ui-widgets-category/bottom-navigation/tips-and-tricks/tips-and-tricks-page")
+];
+const navigationLinksTsc = [
+    new link("Usage", "ns-ui-widgets-category/bottom-navigation/usage/usage-ts-page"),
+    new link("Theming", "ns-ui-widgets-category/bottom-navigation/theming/theming-ts-page"),
+    new link("Events", "ns-ui-widgets-category/bottom-navigation/events/events-ts-page"),
+    new link("Properties", "ns-ui-widgets-category/bottom-navigation/properties/properties-ts-page"),
+    new link("Tips & Tricks", "ns-ui-widgets-category/bottom-navigation/tips-and-tricks/tips-and-tricks-ts-page")
+];
+
+function onNavigatingTo(args) {
+    const page = args.object;
+
+    page.bindingContext = new ListViewLinksModel({
+        links: navigationLinks,
+        actionBarTitle: args.context.title,
+        showTypeScriptExamples: false,
+        tsclinks: navigationLinksTsc
+    });
+}
+exports.onNavigatingTo = onNavigatingTo;

app/ns-ui-widgets-category/bottom-navigation/bottom-navigation-page.xml

@@ -0,0 +1,10 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
+	  xmlns:myList="components" 
+	  navigatingTo="onNavigatingTo" 
+	  navigatedTo="onNavigatedTo">
+    <Page.actionBar>
+		<ActionBar title="{{ actionBarTitle == null ? '' : actionBarTitle }}" icon="" class="action-bar"/>
+	</Page.actionBar>
+
+	<myList:list/>
+</Page>

app/ns-ui-widgets-category/bottom-navigation/end.md

@@ -0,0 +1,7 @@
+**API Reference for the** [BottomNavigation Class](https://docs.nativescript.org/api-reference/classes/_ui_tab_navigation_bottom_navigation_.bottomnavigation)
+
+**Native Component**
+
+| Android               | iOS      |
+|:----------------------|:---------|
+| [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout) | [UITabViewController](https://developer.apple.com/documentation/uikit/uitabbarcontroller?language=objc) | 

app/ns-ui-widgets-category/bottom-navigation/events/article.md

@@ -0,0 +1,6 @@
+- `selectedIndexChanged` - Event used to track the tabs interaction though the change of `selectedIndex` property of `BottomNavigation` 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='bottom-navigation-events-js'/>
+<snippet id='bottom-navigation-events-tsc'/>

app/ns-ui-widgets-category/bottom-navigation/events/events-page.js

@@ -0,0 +1,27 @@
+const fromObject = require("tns-core-modules/data/observable").fromObject;
+
+exports.onNavigatingTo = (args) => {
+    const page = args.object;
+    const vm = fromObject({
+        selectedIndex: 1
+    });
+
+    page.bindingContext = vm;
+};
+
+// >> bottom-navigation-events-js
+exports.onBottomNavLoaded = (args) => {
+    // Using the loaded event to ger a reference to the BottomNavigation
+    const bottomNavigation = args.object;
+
+    // Using selectedIndexChanged
+    bottomNavigation.on("selectedIndexChanged", (args) => {
+        // args is of type SelectedIndexChangedEventData
+        const oldIndex = args.oldIndex;
+        const newIndex = args.newIndex;
+        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
+
+        args.object.page.bindingContext.set("selectedIndex", newIndex);
+    });
+};
+// << bottom-navigation-events-js

app/ns-ui-widgets-category/bottom-navigation/events/events-page.xml

@@ -0,0 +1,28 @@
+<Page navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="BottomNavigation - Events"/>
+	</Page.actionBar>
+    <!-- >> bottom-navigation-events-xml -->
+    <BottomNavigation selectedIndex="1" loaded="onBottomNavLoaded">
+        <!-- The bottom 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="orange"></Label>
+                <Label row="1" text="{{ 'newIndex: ' +  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="{{ 'newIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+    </BottomNavigation>
+    <!-- << bottom-navigation-events-xml -->
+</Page>

app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.ts

@@ -0,0 +1,29 @@
+// >> bottom-navigation-events-tsc
+import { EventData, fromObject } from "tns-core-modules/data/observable";
+import { BottomNavigation, SelectedIndexChangedEventData } from "tns-core-modules/ui/bottom-navigation";
+// >> (hide)
+import { Page } from "tns-core-modules/ui/page";
+
+export function onNavigatingTo(args: EventData) {
+    const page = args.object as Page;
+    const vm = fromObject({
+        selectedIndex: 1
+    });
+
+    page.bindingContext = vm;
+}
+// << (hide)
+export function onBottomNavLoaded(args: EventData) {
+    // Using the loaded event to ger a reference to the BottomNavigation
+    const bottomNavigation = args.object as BottomNavigation;
+
+    // Using selectedIndexChanged
+    bottomNavigation.on(BottomNavigation.selectedIndexChangedEvent, (data: SelectedIndexChangedEventData) => {
+        const oldIndex: number = data.oldIndex;
+        const newIndex: number = data.newIndex;
+        console.log(`oldIndex: ${oldIndex}; newIndex: ${newIndex}`);
+
+        (<any>args.object).page.bindingContext.set("selectedIndex", newIndex);
+    });
+}
+// << bottom-navigation-events-tsc

app/ns-ui-widgets-category/bottom-navigation/events/events-ts-page.xml

@@ -0,0 +1,29 @@
+<Page navigatingTo="onNavigatingTo">
+    <Page.actionBar>
+		<ActionBar title="BottomNavigation - Events"/>
+	</Page.actionBar>
+    <!-- >> bottom-navigation-events-xml -->
+    <BottomNavigation selectedIndex="1" loaded="onBottomNavLoaded">
+
+        <!-- The bottom 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="{{ 'newIndex: ' +  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="{{ 'selectednewIndexIndex: ' +  selectedIndex }}" class="h2 text-center"></Label>
+            </GridLayout>
+        </TabContentItem>
+    </BottomNavigation>
+    <!-- << bottom-navigation-events-xml -->
+</Page>

app/ns-ui-widgets-category/bottom-navigation/metadata.md

@@ -0,0 +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: 416
+slug: bottom-navigation
+---
+example-order: usage, theming, properties, events, tips-and-tricks

app/ns-ui-widgets-category/bottom-navigation/overview.md

@@ -0,0 +1,16 @@
+> **Disclaimer:** The `BottomNavigation` 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 `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 navigation with 3 to 5 tabs each with separate function. For additional information and details about bottom navigation refer to [the Material Design guidelines](https://material.io/design/components/bottom-navigation.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 `BottomNavigation` component roundup
+
+Component Primary Objectives:
+- Used for High Level navigation.
+- Good for UX structure with 3 to 5 different options.
+
+Limitations 
+- No navigation transitions.
+- No navigation gestures (e.g., swipe to navigate).
+- No content preloading.

app/ns-ui-widgets-category/bottom-navigation/properties/article.md

@@ -0,0 +1,14 @@
+
+- `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.
+
+- `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` /* UITabBarController */; - Gets the native iOS [UITabBarController](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITabBarController_Class/) that represents the user interface for this component. Valid only when running on iOS.
+
+<snippet id='bottom-navigation-properties-js'/>
+<snippet id='bottom-navigation-properties-tsc'/>
+<snippet id='bottom-navigation-properties-tsc-xml'>