feat(ng-demo): add Tabs example

Author: urdeveloper

demo-ng/package.json

@@ -24,6 +24,7 @@
         "@nativescript-community/ui-material-slider": "file:../packages/slider",
         "@nativescript-community/ui-material-snackbar": "file:../packages/snackbar",
         "@nativescript-community/ui-material-textfield": "file:../packages/textfield",
+        "@nativescript-community/ui-material-tabs": "file:../packages/tabs",
         "@nativescript/theme": "~3.0.0",
         "reflect-metadata": "~0.1.13",
         "rxjs": "~6.6.3",

demo-ng/src/app/examples/examples.module.ts

@@ -9,6 +9,7 @@ import { SliderModule } from './slider/slider.module';
 import { ProgressModule } from './progress/progress.module';
 import { ActivityIndicatorModule } from './activity-indicator/activity-indicator.module';
 import { BottomNavigationBarModule } from './bottom-navigation-bar/bottom-navigation-bar.module';
+import { TabsModule } from './tabs/tabs.module';
 
 @NgModule({
     imports: [
@@ -21,7 +22,8 @@ import { BottomNavigationBarModule } from './bottom-navigation-bar/bottom-naviga
         SliderModule,
         ProgressModule,
         ActivityIndicatorModule,
-        BottomNavigationBarModule
+        BottomNavigationBarModule,
+        TabsModule
     ]
 })
 export class ExamplesModule {}

demo-ng/src/app/examples/examples.routing.ts

@@ -11,6 +11,7 @@ import { SliderComponent } from './slider/slider.component';
 import { ProgressComponent } from './progress/progress.component';
 import { ActivityIndicatorComponent } from './activity-indicator/activity-indicator.component';
 import { BottomNavigationBarComponent } from './bottom-navigation-bar/bottom-navigation-bar.component';
+import { TabsComponent } from './tabs/tabs.component';
 // import { DialogComponent } from './dialog/dialog.component';
 
 const routes: Routes = [
@@ -49,6 +50,10 @@ const routes: Routes = [
     {
         path: 'bottom-navigation-bar',
         component: BottomNavigationBarComponent
+    },
+    {
+        path: 'tabs',
+        component: TabsComponent
     }
 ];
 

demo-ng/src/app/examples/tabs/tabs.component.html

@@ -0,0 +1,34 @@
+<MDTabs selectedIndex="1">
+  <!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
+  <TabStrip>
+    <TabStripItem>
+      <Label text="Home"></Label>
+      <Image src="res://ic_home"></Image>
+    </TabStripItem>
+    <TabStripItem>
+      <Label text="Account"></Label>
+      <Image src="res://ic_view_list"></Image>
+    </TabStripItem>
+    <TabStripItem>
+      <Label text="Search"></Label>
+      <Image src="res://ic_menu"></Image>
+    </TabStripItem>
+  </TabStrip>
+
+  <!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Home Page" class="h2 text-center"></Label>
+    </GridLayout>
+  </TabContentItem>
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Account Page" class="h2 text-center"></Label>
+    </GridLayout>
+  </TabContentItem>
+  <TabContentItem>
+    <GridLayout>
+      <Label text="Search Page" class="h2 text-center"></Label>
+    </GridLayout>
+  </TabContentItem>
+</MDTabs>

demo-ng/src/app/examples/tabs/tabs.component.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'ns-buttons',
+    templateUrl: './tabs.component.html',
+    moduleId: module.id
+})
+export class TabsComponent implements OnInit {
+    ngOnInit() { }
+}

demo-ng/src/app/examples/tabs/tabs.module.ts

@@ -0,0 +1,11 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule } from '@nativescript/angular';
+import { NativeScriptMaterialTabsModule } from '@nativescript-community/ui-material-tabs/angular';
+import { TabsComponent } from './tabs.component';
+
+@NgModule({
+    declarations: [TabsComponent],
+    imports: [NativeScriptCommonModule, NativeScriptMaterialTabsModule],
+    schemas: [NO_ERRORS_SCHEMA]
+})
+export class TabsModule {}

demo-ng/src/app/home/home.component.html

@@ -1,19 +1,11 @@
-<ActionBar
-    title="Examples"
-    class="action-bar"
-></ActionBar>
+<ActionBar title="Examples" class="action-bar"></ActionBar>
 
 <GridLayout class="page">
-    <ListView
-        [items]="examples"
-        (itemTap)="goToExample($event)"
-        class="list-group"
-    >
+    <ListView [items]="examples" (itemTap)="goToExample($event)" class="list-group">
         <ng-template let-example="item">
-            <Label
-                [text]="example"
-                class="list-group-item"
-            ></Label>
+            <StackLayout>
+                <Label [text]="example" class="list-group-item"></Label>
+            </StackLayout>
         </ng-template>
     </ListView>
-</GridLayout>
+</GridLayout>

demo-ng/src/app/home/home.component.ts

@@ -17,7 +17,8 @@ export class HomeComponent implements OnInit {
         'Ripple',
         'Text Field',
         'Slider',
-        'Progress'
+        'Progress',
+        'Tabs'
     ];
 
     constructor(private router: RouterExtensions) {}