From 2ca0068c566ff5117d70cd729c1991d40ba44cb0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 5 Feb 2016 16:07:56 -0500
Subject: [PATCH] docs(demos): add tabs demo with scenarios

references driftyco/ionic-site#397
---
 demos/tabs/index.ts           |  6 +++
 demos/tabs/main.html          | 93 +++++++++++++++++++++++++++++++++++
 ionic/components/tabs/tab.ts  |  1 +
 ionic/components/tabs/tabs.ts |  1 +
 4 files changed, 101 insertions(+)
 create mode 100644 demos/tabs/index.ts
 create mode 100644 demos/tabs/main.html

diff --git a/demos/tabs/index.ts b/demos/tabs/index.ts
new file mode 100644
index 0000000000..8807633159
--- /dev/null
+++ b/demos/tabs/index.ts
@@ -0,0 +1,6 @@
+import {App} from 'ionic/ionic';
+
+@App({
+  templateUrl: 'main.html',
+})
+class ApiDemoApp {}
diff --git a/demos/tabs/main.html b/demos/tabs/main.html
new file mode 100644
index 0000000000..5228e8a13d
--- /dev/null
+++ b/demos/tabs/main.html
@@ -0,0 +1,93 @@
+<ion-content>
+  <!-- Text -->
+  <ion-tabs no-navbar>
+    <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- Icons -->
+  <ion-tabs no-navbar selectedIndex="1">
+    <ion-tab tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- Icons on top of text -->
+  <ion-tabs no-navbar selectedIndex="2">
+    <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- Icons below text -->
+  <ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- Icons right of text -->
+  <ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- Icons left of text -->
+  <ion-tabs tabbarIcons="left" no-navbar>
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- No icons -->
+  <ion-tabs tabbarIcons="hide" no-navbar>
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- No overflow text -->
+  <ion-tabs no-navbar>
+    <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
+  </ion-tabs>
+
+
+  <!-- primary color tabbar -->
+  <ion-tabs no-navbar primary>
+    <ion-tab tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+
+  <!-- primary color tabbar with a badge -->
+  <ion-tabs no-navbar primary>
+    <ion-tab tabIcon="call" [root]="root"></ion-tab>
+    <ion-tab tabIcon="heart" [root]="root" tabBadge="23" tabBadgeStyle="danger"></ion-tab>
+    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
+  </ion-tabs>
+</ion-content>
+
+<style>
+  ion-tabs[no-navbar] {
+    position: relative;
+    top: auto;
+    height: auto;
+    margin-bottom: 20px;
+  }
+
+  ion-tabs[no-navbar] > ion-navbar-section,
+  ion-tabs[no-navbar] > ion-content-section {
+    display: none !important;
+  }
+</style>
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
index 18a96d7a5c..fda936de71 100644
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -76,6 +76,7 @@ import {TabButton} from './tab-button';
  * @property {String} [tabBadgeStyle] - set the badge color for this tab
  * @property {Any} (select) - method to call when the current tab is selected
  *
+ * @demo /docs/v2/demos/tabs/ 
  */
 @Component({
   selector: 'ion-tab',
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 06879daaf0..bbc79301d3 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -36,6 +36,7 @@ import {isUndefined, isTrueProperty} from '../../util/util';
  * individual Tab components. On iOS, the TabBar is placed on the bottom of
  * the screen, while on Android it is at the top.
  *
+ * @demo /docs/v2/demos/tabs/
  * @see {@link /docs/v2/components#tabs Tabs Component Docs}
  * @see {@link ../Tab Tab API Docs}
  */