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)