chore(build): rename ionic directory to src and update all references in the build process.

src/components/tabs/test/advanced/e2e.ts

@@ -0,0 +1,20 @@
+
+// it('should go to Tab1 Page1', function() {
+//   element(by.css('#signIn')).click();
+// });
+//
+// it('should go to Tab1 Page2', function() {
+//   element(by.css('#goToTab1Page2')).click();
+// });
+//
+// it('should go back to Tab1 Page1', function() {
+//   element(by.css('#backToTab1Page1')).click();
+// });
+//
+// it('should go to Tab2 Page1', function() {
+//   element(by.css('.tab-button:nth-of-type(2)')).click();
+// });
+//
+// it('should go back to Tab1 Page1', function() {
+//   element(by.css('.tab-button:nth-of-type(1)')).click();
+// });

src/components/tabs/test/advanced/index.ts

@@ -0,0 +1,419 @@
+import {ViewChild} from '@angular/core';
+import {RouteConfig} from '@angular/router';
+import {Location} from '@angular/common';
+
+import {App, Page, NavController, NavParams, Modal, ViewController, Tabs} from '../../../../../ionic';
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Sign In</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <ion-card>
+        <ion-item>
+          <ion-label>Username:</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label>Password:</ion-label>
+          <ion-input type="password"></ion-input>
+        </ion-item>
+        <ion-item>
+          <button block id="signIn" (click)="push()">Sign In</button>
+        </ion-item>
+      </ion-card>
+    </ion-content>
+  `
+})
+class SignIn {
+  constructor(private nav: NavController) {}
+
+  push() {
+    this.nav.push(TabsPage, {
+      userId: 8675309
+    });
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-toolbar>
+      <ion-title>Chat Modal</ion-title>
+    </ion-toolbar>
+    <ion-content padding>
+      <p><button (click)="viewCtrl.dismiss()">Close Modal</button></p>
+    </ion-content>
+  `
+})
+class ChatPage {
+  constructor(private viewCtrl: ViewController) {}
+
+  onPageDidLoad() {
+    console.log('ChatPage, onPageDidLoad');
+  }
+
+  onPageDidUnload() {
+    console.log('ChatPage, onPageDidUnload');
+  }
+}
+
+
+@Page({
+  templateUrl: './tabs.html'
+})
+class TabsPage {
+  tab1Root = Tab1Page1;
+  tab2Root = Tab2Page1;
+  tab3Root = Tab3Page1;
+  @ViewChild(Tabs) tabs: Tabs;
+
+  constructor(private nav: NavController, private params: NavParams) {}
+
+  ngAfterViewInit() {
+    this.tabs.change.subscribe(tab => {
+      console.log('tabs.change.subscribe', tab.index);
+    });
+  }
+
+  onTabChange() {
+    // wired up through the template
+    // <ion-tabs (change)="onTabChange()">
+    console.log('onTabChange');
+  }
+
+  chat() {
+    console.log('Chat clicked!');
+    let modal = Modal.create(ChatPage);
+    this.nav.present(modal);
+  }
+
+  onPageWillEnter() {
+    console.log('TabsPage, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('TabsPage, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('TabsPage, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('TabsPage, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('TabsPage, onPageDidUnload');
+  }
+}
+
+
+//
+// tab 1
+//
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 1 Page 1</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>' +
+      '<p><button (click)="logout()">Logout</button></p>' +
+      '<p><button (click)="favoritesTab()">Favorites Tab</button></p>' +
+      '<p><button (click)="goBack()">Go Back</button></p>' +
+      '<p>UserId: {{userId}}</p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab1Page1 {
+  userId: string;
+
+  constructor(private nav: NavController, private tabs: Tabs, private params: NavParams) {
+    this.userId = params.get('userId');
+  }
+
+  push() {
+    this.nav.push(Tab1Page2)
+  }
+
+  goBack() {
+    console.log('go back begin');
+    this.nav.pop().then((val) => {
+      console.log('go back completed', val);
+    });;
+  }
+
+  favoritesTab() {
+    this.tabs.select(1);
+  }
+
+  logout() {
+    this.nav.rootNav.setRoot(SignIn, null, { animate: true, direction: 'back' });
+  }
+
+  onPageWillEnter() {
+    console.log('Tab1Page1, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab1Page1, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab1Page1, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab1Page1, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab1Page1, onPageDidUnload');
+  }
+}
+
+
+@Page({
+  template: '' +
+    '<ion-navbar *navbar primary>' +
+      '<ion-title>Tabs 1 Page 2</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button (click)="push()">Go to Tab 1, Page 3</button></p>' +
+      '<p><button id="backToTab1Page1" (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab1Page2 {
+  constructor(private nav: NavController) {}
+
+  push() {
+    this.nav.push(Tab1Page3)
+  }
+
+  onPageWillEnter() {
+    console.log('Tab1Page2, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab1Page2, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab1Page2, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab1Page2, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab1Page2, onPageDidUnload');
+  }
+}
+
+
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 1 Page 3</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab1Page3 {
+  constructor(private nav: NavController) {}
+
+  onPageWillEnter() {
+    console.log('Tab1Page3, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab1Page3, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab1Page3, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab1Page3, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab1Page3, onPageDidUnload');
+  }
+}
+
+
+
+//
+// tab 2
+//
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 2 Page 1</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button (click)="push()">Go to Tab 2, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab2Page1 {
+  constructor(private nav: NavController) {}
+
+  push() {
+    this.nav.push(Tab2Page2)
+  }
+
+  onPageWillEnter() {
+    console.log('Tab2Page1, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab2Page1, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab2Page1, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab2Page1, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab2Page1, onPageDidUnload');
+  }
+}
+
+
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 2 Page 2</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button (click)="push()">Go to Tab 2, Page 3</button></p>' +
+      '<p><button (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab2Page2 {
+  constructor(private nav: NavController) {}
+
+  push() {
+    this.nav.push(Tab2Page3)
+  }
+
+  onPageWillEnter() {
+    console.log('Tab2Page2, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab2Page2, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab2Page2, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab2Page2, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab2Page2, onPageDidUnload');
+  }
+}
+
+
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 2 Page 3</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding>' +
+      '<p><button (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>'
+})
+class Tab2Page3 {
+  constructor(private nav: NavController) {}
+
+  onPageWillEnter() {
+    console.log('Tab2Page3, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab2Page3, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab2Page3, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab2Page3, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab2Page3, onPageDidUnload');
+  }
+}
+
+
+
+//
+// tab 3
+//
+@Page({
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 3</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content padding><h2>Tabs 3</h2></ion-content>'
+})
+class Tab3Page1 {
+
+  onPageWillEnter() {
+    console.log('Tab3Page1, onPageWillEnter');
+  }
+
+  onPageDidEnter() {
+    console.log('Tab3Page1, onPageDidEnter');
+  }
+
+  onPageWillLeave() {
+    console.log('Tab3Page1, onPageWillLeave');
+  }
+
+  onPageDidLeave() {
+    console.log('Tab3Page1, onPageDidLeave');
+  }
+
+  onPageDidUnload() {
+    console.log('Tab3Page1, onPageDidUnload');
+  }
+}
+
+
+@App()
+@RouteConfig([
+  { path: '/', component: SignIn, as: 'Signin' },
+  { path: '/tabs', component: TabsPage, as: 'Tabs' },
+])
+class E2EApp {}

src/components/tabs/test/advanced/tabs.html

@@ -0,0 +1,7 @@
+
+<ion-tabs preloadTabs="false" (change)="onTabChange()">
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="tab1Root" [rootParams]="params"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star" [root]="tab2Root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="tab3Root"></ion-tab>
+  <ion-tab tabTitle="Chat" tabIcon="chatbubbles" (select)="chat()"></ion-tab>
+</ion-tabs>

src/components/tabs/test/badges/index.ts

@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  myBadge:number = 55;
+
+  constructor() {}
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

src/components/tabs/test/badges/main.html

@@ -0,0 +1,68 @@
+
+<!-- Text -->
+<ion-tabs no-navbar>
+  <ion-tab tabTitle="Recents"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabBadge="32"></ion-tab>
+  <ion-tab tabTitle="Settings"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons -->
+<ion-tabs no-navbar>
+  <ion-tab tabIcon="call"></ion-tab>
+  <ion-tab tabIcon="heart"></ion-tab>
+  <ion-tab tabIcon="settings" tabBadge="all" tabBadgeStyle="primary"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons on top of text -->
+<ion-tabs no-navbar>
+  <ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab>
+  <ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons below text -->
+<ion-tabs tabbarLayout="icon-bottom" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons right of text -->
+<ion-tabs tabbarLayout="icon-right" primary no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
+</ion-tabs>
+
+<!-- Icons left of text -->
+<ion-tabs tabbarLayout="icon-left" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
+</ion-tabs>
+
+<!-- No icons -->
+<ion-tabs no-navbar tabbarLayout="icon-hide">
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+
+<!-- No title -->
+<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+</ion-tabs>
+
+<!-- Dynamic Badge -->
+<ion-tabs tabbarLayout="icon-left" no-navbar>
+  <ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
+  <ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
+  <ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>
+</ion-tabs>

src/components/tabs/test/badges/styles.css

@@ -0,0 +1,12 @@
+
+ion-tabs {
+  position: relative;
+  top: auto;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+ion-navbar-section,
+ion-content-section {
+  display: none !important;
+}

src/components/tabs/test/basic/e2e.ts

@@ -0,0 +1 @@
+

src/components/tabs/test/basic/index.ts

@@ -0,0 +1,192 @@
+ import {App, Page, NavController, Alert, Modal, ViewController} from '../../../../../ionic';
+
+//
+// Modal
+//
+@Page({
+  template: `
+  <ion-toolbar>
+    <ion-buttons start>
+      <button (click)="dismiss()">Cancel</button>
+    </ion-buttons>
+
+    <ion-title>
+      Filter Sessions
+    </ion-title>
+
+    <ion-buttons end>
+      <button (click)="dismiss()">Done</button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-content class="outer-content">
+    <ion-list>
+      <ion-list-header>Tracks</ion-list-header>
+
+      <ion-item *ngFor="let i of items">
+        <ion-label>Toggle {{i}}</ion-label>
+        <ion-toggle secondary></ion-toggle>
+      </ion-item>
+    </ion-list>
+
+    <ion-list>
+      <button ion-item danger detail-none>
+        Reset All Filters
+      </button>
+    </ion-list>
+  </ion-content>
+  `
+})
+class MyModal {
+  items: any[] = [];
+
+  constructor(private viewCtrl: ViewController) {
+    for (var i = 1; i <= 10; i++) {
+      this.items.push(i);
+    }
+  }
+
+  dismiss() {
+    // using the injected ViewController this page
+    // can "dismiss" itself and pass back data
+    this.viewCtrl.dismiss();
+  }
+}
+
+//
+// Tab 1
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Heart</ion-title>
+    </ion-navbar>
+    <ion-content>
+      <ion-list>
+        <ion-list-header>
+          Tab 1
+        </ion-list-header>
+        <ion-item *ngFor="let i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+      </ion-list>
+    </ion-content>
+    `
+})
+export class Tab1 {
+  items: any[] = [];
+
+  constructor() {
+    for (var i = 1; i <= 250; i++) {
+      this.items.push(i);
+    }
+  }
+}
+
+//
+// Tab 2
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Schedule</ion-title>
+    </ion-navbar>
+    <ion-content>
+      <ion-list>
+        <ion-item-sliding *ngFor="let session of sessions" #slidingItem>
+          <ion-item>
+            <h3>{{session.name}} {{session.name}} {{session.name}}</h3>
+            <p>{{session.location}} {{session.location}} {{session.location}}</p>
+          </ion-item>
+          <ion-item-options>
+            <button primary>Speaker<br>Info</button>
+            <button secondary>Add to<br>Favorites</button>
+          </ion-item-options>
+        </ion-item-sliding>
+      </ion-list>
+    </ion-content>
+  `
+})
+export class Tab2 {
+  sessions: any[] = [];
+
+  constructor() {
+    for (var i = 1; i <= 250; i++) {
+      this.sessions.push({
+        name: 'Name ' + i,
+        location: 'Location: ' + i
+      });
+    }
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+      </button>
+      <ion-title>Stopwatch</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 3</h2>
+      <p>
+        <button (click)="presentAlert()">Present Alert</button>
+        <button (click)="presentModal()">Present Modal</button>
+      </p>
+    </ion-content>
+    `
+})
+export class Tab3 {
+  constructor(private nav: NavController) {}
+
+  presentAlert() {
+    let alert = Alert.create({
+      title: 'Alert Title!',
+      buttons: ['Dismiss']
+    });
+    this.nav.present(alert);
+  }
+
+  presentModal() {
+    let modal = Modal.create(MyModal);
+    this.nav.present(modal);
+  }
+}
+
+
+@Page({
+  template: `
+    <ion-menu [content]="content">
+      <ion-toolbar secondary>
+        <ion-title>Menu</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <ion-list>
+          <button ion-item menuClose detail-none>
+            Close Menu
+          </button>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <ion-tabs #content>
+      <ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
+      <ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  root1 = Tab1;
+  root2 = Tab2;
+  root3 = Tab3;
+}
+
+@App({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class e2eApp {
+  root = TabsPage;
+}

src/components/tabs/test/colors/e2e.ts

@@ -0,0 +1 @@
+

src/components/tabs/test/colors/index.ts

@@ -0,0 +1,17 @@
+import {App, Page} from '../../../../../ionic';
+
+
+@Page({template:'hi'})
+class E2EPage{}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

src/components/tabs/test/colors/main.html

@@ -0,0 +1,71 @@
+
+<!-- Default -->
+<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" 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>
+
+
+<!-- Icons on top of text -->
+<ion-tabs no-navbar selectedIndex="2" secondary>
+  <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 tabbarLayout="icon-bottom" no-navbar selectedIndex="1" dark>
+  <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 tabbarLayout="icon-right" no-navbar selectedIndex="0" danger>
+  <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 tabbarLayout="icon-left" no-navbar light>
+  <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 tabbarLayout="icon-hide" no-navbar primary>
+  <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 title -->
+<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
+  <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 danger>
+  <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>

src/components/tabs/test/colors/styles.css

@@ -0,0 +1,12 @@
+
+ion-tabs {
+  position: relative;
+  top: auto;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+ion-navbar-section,
+ion-content-section {
+  display: none !important;
+}

src/components/tabs/test/ghost/index.ts

@@ -0,0 +1,133 @@
+  import {App, Page, NavController, Tab} from '../../../../../ionic';
+
+import {ContentChild, QueryList, ViewChildren} from '@angular/core';
+
+//
+// Tab 1
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Heart</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 1</h2>
+    </ion-content>
+    `
+})
+class Tab1 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 2
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>Star</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 2</h2>
+    </ion-content>
+    `
+})
+class Tab2 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+      </button>
+      <ion-title>Stopwatch</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Tab 3</h2>
+    </ion-content>
+    `
+})
+class Tab3 {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+//
+// Tab 3
+//
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <button menuToggle>
+        <ion-icon name="menu"></ion-icon>
+      </button>
+      <ion-title>Quesarito</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <h2>Quesarito</h2>
+    </ion-content>
+    `
+})
+class QuesaritoPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+}
+
+@App({
+  template: `
+    <ion-menu [content]="content">
+      <ion-toolbar secondary>
+        <ion-title>Secret Menu</ion-title>
+      </ion-toolbar>
+      <ion-content>
+        <ion-list>
+          <button ion-item menuClose detail-none (click)="openPage('quesarito')">
+            Quesarito
+          </button>
+        </ion-list>
+      </ion-content>
+    </ion-menu>
+
+    <ion-tabs #content>
+      <ion-tab tabTitle="Heart" tabIcon="heart" [root]="root1" #tab1></ion-tab>
+      <ion-tab tabTitle="Star" tabIcon="star" [root]="root2"></ion-tab>
+      <ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
+    </ion-tabs>
+  `
+})
+export class TabsPage {
+  @ViewChildren(Tab) tab : QueryList<Tab>;
+
+  ngAfterViewInit() {
+    console.log('Tab', this.tab);
+    console.log(this.tab.first.setRoot);
+  }
+
+  openPage(which) {
+    let pages = {
+      'quesarito': QuesaritoPage
+    };
+
+    this.tab.first.setRoot(pages[which])
+  }
+
+  constructor() {
+
+    this.root1 = Tab1;
+    this.root2 = Tab2;
+    this.root3 = Tab3;
+  }
+  ngOnInit() {
+  }
+}

src/components/tabs/test/tab-bar-scenarios/e2e.ts

@@ -0,0 +1 @@
+

src/components/tabs/test/tab-bar-scenarios/index.ts

@@ -0,0 +1,17 @@
+import {App, Page} from '../../../../../ionic';
+
+
+@Page({template:'hi'})
+class E2EPage{}
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}
+
+document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'

src/components/tabs/test/tab-bar-scenarios/main.html

@@ -0,0 +1,73 @@
+
+<!-- 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 tabbarLayout="icon-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 tabbarLayout="icon-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 tabbarLayout="icon-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 tabbarLayout="icon-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 title -->
+<ion-tabs tabbarLayout="title-hide" secondary 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="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
+  <ion-tab tabTitle="Messages" tabIcon="chatboxes" [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>

src/components/tabs/test/tab-bar-scenarios/styles.css

@@ -0,0 +1,12 @@
+
+ion-tabs {
+  position: relative;
+  top: auto;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+ion-navbar-section,
+ion-content-section {
+  display: none !important;
+}