tabs

src/components/tabs/extensions/android.scss

@@ -2,7 +2,9 @@
 // Android Toolbar
 // --------------------------------------------------
 
-$tab-bar-android-item-padding:             4px 10px !default;
+$tab-bar-android-item-padding:              4px 10px !default;
+$tab-bar-android-active-border-width:       3px !default;
+$tab-bar-android-active-border-color:       red !default;
 
 
 .tabs-android {
@@ -11,4 +13,12 @@ $tab-bar-android-item-padding:             4px 10px !default;
     padding: $tab-bar-item-padding;
   }
 
+  .tab-bar .tab-bar-item {
+    border-bottom: $tab-bar-android-active-border-width solid transparent;
+  }
+
+  .tab-bar .tab-active {
+    border-bottom-color: $tab-bar-android-active-border-color;
+  }
+
 }

src/components/tabs/extensions/ios.scss

@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 $tab-bar-ios-item-padding:             3px 10px !default;
-$tab-bar-ios-item-font-size:           11px !default;
-$tab-bar-ios-item-icon-size:           28px !default;
+$tab-bar-ios-item-font-size:           1.1rem !default;
+$tab-bar-ios-item-icon-size:           2.8rem !default;
 
 
 .tabs-ios {
@@ -25,4 +25,8 @@ $tab-bar-ios-item-icon-size:           28px !default;
     @include hairline(top, $toolbar-ios-border-color);
   }
 
+  > .tab-bar.toolbar-top {
+    @include hairline(bottom, $toolbar-ios-border-color);
+  }
+
 }

src/components/tabs/tabs.js

@@ -22,16 +22,20 @@ import {IonicComponent} from 'ionic2/config/component'
         </a>
       </div>
     </div>
-    <content></content>
+    <div class="pane-container tabs-container">
+      <content></content>
+    </div>
   `,
   directives: [For]
 })
 export class Tabs  {
   constructor(
-    element: NgElement
+    @NgElement() ngElement: NgElement
   ) {
-    this.domElement = element.domElement
+    this.domElement = ngElement.domElement
+
     this.domElement.classList.add('pane')
+
     this.config = Tabs.config.invoke(this)
 
     this.tabs = []

src/components/tabs/test/tab-bar-bottom/e2e.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,20 @@
+
+<ion-view>
+
+  <ion-tabs placement="bottom">
+
+    <ion-tab tab-title="Tab 1">
+      <ion-view>
+        Tab 1 Content
+      </ion-view>
+    </ion-tab>
+
+    <ion-tab tab-title="Tab 2">
+      <ion-view>
+        Tab 2 Content
+      </ion-view>
+    </ion-tab>
+
+  </ion-tabs>
+
+</ion-view>

src/components/tabs/test/tab-bar-bottom/main.js

@@ -0,0 +1,17 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View, Tabs, Tab} from 'ionic2/components';
+
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Tabs, Tab]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/tabs/test/tab-bar-top/e2e.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,16 @@
+
+<ion-tabs placement="top">
+
+  <ion-tab tab-title="Tab 1">
+    <ion-view nav-title="Tab 1">
+      Tab 1 Content
+    </ion-view>
+  </ion-tab>
+
+  <ion-tab tab-title="Tab 2">
+    <ion-view nav-title="Tab 2">
+      Tab 2 Content
+    </ion-view>
+  </ion-tab>
+
+</ion-tabs>

src/components/tabs/test/tab-bar-top/main.js

@@ -0,0 +1,17 @@
+import {bootstrap} from 'angular2/core';
+import {Component, Template} from 'angular2/angular2';
+import {View, Tabs, Tab} from 'ionic2/components';
+
+
+@Component({ selector: '[ion-app]' })
+@Template({
+  url: 'main.html',
+  directives: [View, Tabs, Tab]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+}
+
+bootstrap(IonicApp)

src/components/toolbar/test/lopsided-buttons/main.html

@@ -11,4 +11,36 @@
     <button class="button">s1</button>
   </ion-nav-items>
 
+  <ion-content class="padding">
+    <p>
+      A long time ago, in a galaxy far,
+      far away....
+    </p>
+    <p>
+      It is a period of civil war.
+      Rebel spaceships, striking
+      from a hidden base, have won
+      their first victory against
+      the evil Galactic Empire.
+    </p>
+    <p>
+      During the battle, rebel
+      spies managed to steal secret
+      plans to the Empire's
+      ultimate weapon, the DEATH
+      STAR, an armored space
+      station with enough power to
+      destroy an entire planet.
+    </p>
+    <p>
+      Pursued by the Empire's
+      sinister agents, Princess
+      Leia races home aboard her
+      starship, custodian of the
+      stolen plans that can save
+      her people and restore
+      freedom to the galaxy....
+    </p>
+  </ion-content>
+
 </ion-view>

src/components/toolbar/toolbar.js

@@ -29,12 +29,13 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
       <div class="toolbar-item toolbar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
-    </div>`,
+    </div>
+    <div class="shared-toolbar"></div>`,
   directives: [BackButton]
 })
 export class Toolbar {
   constructor(
-    @NgElement() ngEle:NgElement, 
+    @NgElement() ngEle:NgElement,
     configFactory: ToolbarConfig
   ) {
     this.domElement = ngEle.domElement

src/components/toolbar/toolbar.scss

@@ -71,3 +71,12 @@ $toolbar-background:              #f7f7f8 !default;
 .toolbar-secondary-item {
   @include flex-order(4);
 }
+
+
+
+.shared-toolbar {
+  display: none;
+  width: 100%;
+  height: 44px;
+  background: red;
+}

src/components/view/view.js

@@ -13,7 +13,7 @@ export let ViewConfig = new ComponentConfig('view')
 })
 @Template({
   inline: `
-    <ion-toolbar [nav-title]="title">
+    <ion-toolbar class="view-toolbar" [nav-title]="title">
       <content select="ion-nav-title"></content>
       <content select="ion-nav-items[side=primary]"></content>
       <content select="ion-nav-items[side=secondary]"></content>