Merge pull request #239 from NativeScript/tsonevn_tab_view_icon_font

tab view icon font

Author: tsonevn

Diff for: app/ui-category/tab-view/tab-view-examples.component.ts

@@ -6,6 +6,7 @@ let menuLinks = [
     new Link("TabView items", "/tab-view/items"),
     new Link("Customizing Tab View", "/tab-view/customizing"),
     new Link("Binding (Two-way) TabView selectedIndex", "/tab-view/binding"),
+    new Link("Using icon font in TabView", "/tab-view/icon-fonts"),
 ];
 
 @Component({

Diff for: app/ui-category/tab-view/tab-view-examples.module.ts

@@ -3,6 +3,7 @@ import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { TabViewExamplesComponent } from "./tab-view-examples.component";
 import { BasicTabViewComponent } from "./basic-tab-view/basic-tab-view.component";
+import { TabViewIconFontsComponent } from "./tab-view-icon-fonts/tab-view-icon-fonts.component";
 import { TabViewItemsComponent } from "./tab-view-items/tab-view-items.component";
 import { CustomizingTabViewItemsComponent } from "./customizing-tab-view-items/customizing-tab-view-items.component";
 import { BindingTabViewItemsComponent } from "./binding-tab-view-items/binding-tab-view-items.component";
@@ -32,6 +33,11 @@ export const routerConfig = [
         path: "binding",
         component: BindingTabViewItemsComponent,
         data: { title: "Binding (Two-way) TabView selectedIndex" }
+    },
+    {
+        path: "icon-fonts",
+        component: TabViewIconFontsComponent,
+        data: { title: "Using icon font in TabView" }
     }
 ];
 
@@ -49,7 +55,8 @@ export const routerConfig = [
         BasicTabViewComponent,
         TabViewItemsComponent,
         CustomizingTabViewItemsComponent,
-        BindingTabViewItemsComponent
+        BindingTabViewItemsComponent,
+        TabViewIconFontsComponent
     ]
 })
 

Diff for: app/ui-category/tab-view/tab-view-icon-fonts/article.md

@@ -0,0 +1,2 @@
+HTML
+<snippet id='tabview-icon-font-html'/>

Diff for: app/ui-category/tab-view/tab-view-icon-fonts/style.css

@@ -0,0 +1,3 @@
+.icon{
+    font-family: 'icomoon';
+}

Diff for: app/ui-category/tab-view/tab-view-icon-fonts/tab-view-icon-fonts.component.html

@@ -0,0 +1,12 @@
+<!-- >> tabview-icon-font-html -->
+<TabView class="icon" selectedIndex="0" sdkExampleTitle sdkToggleNavButton>
+	<StackLayout *tabItem="{title: '&#xe913;'}">
+		<Label text="First TabView item with Icon Font" textAlignment="center" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
+		<Label text="&#xe913;" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
+	</StackLayout>
+	<StackLayout *tabItem="{title: '&#xe908;'}">
+		<Label text="Second TabView item with Icon Font" textAlignment="center" textWrap="true" class="h2 m-x-auto" color="green"></Label>
+		<Label text="&#xe908;" textWrap="true" class="h2 m-x-auto" color="green"></Label>
+	</StackLayout>
+</TabView>
+<!-- << tabview-icon-font-html -->

Diff for: app/ui-category/tab-view/tab-view-icon-fonts/tab-view-icon-fonts.component.ts

@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { StackLayout } from "ui/layouts/stack-layout";
+
+import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
+
+@Component({
+    moduleId: module.id,
+    templateUrl: "./tab-view-icon-fonts.component.html",
+    styleUrls: ["./style.css"]
+})
+export class TabViewIconFontsComponent {
+
+}