tab bar placement updates

src/components/tabs/extensions/ios.scss

@@ -27,15 +27,15 @@ $tab-bar-ios-item-icon-size:           2.8rem !default;
     font-size: $tab-bar-ios-item-icon-size;
   }
 
-  &.tab-bar-bottom > .tab-bar-container {
+  &[tab-bar-placement="bottom"] > .tab-bar-container {
     @include hairline(top, $toolbar-ios-border-color);
   }
 
-  &.tab-bar-top > .tab-bar-container {
+  &[tab-bar-placement="top"] > .tab-bar-container {
     @include hairline(bottom, $toolbar-ios-border-color);
   }
 
-  &.tab-bar-top > .toolbar-container .toolbar {
+  &[tab-bar-placement="top"] > .toolbar-container .toolbar {
     @include hairline(bottom, none);
   }
 

src/components/tabs/tabs.js

@@ -1,10 +1,10 @@
-import {NgElement, Component, Template, For} from 'angular2/angular2'
+import {NgElement, Component, Template, For, PropertySetter} from 'angular2/angular2'
 import {IonicComponent} from 'ionic2/config/component'
 
 @Component({
   selector: 'ion-tabs',
   bind: {
-    placement: 'placement',
+    tabBarPlacement: 'tab-bar-placement',
     tabBarIcons: 'tab-bar-icons',
     tabBarText: 'tab-bar-text'
   }
@@ -18,7 +18,7 @@ import {IonicComponent} from 'ionic2/config/component'
 
     <nav class="tab-bar-container"
          role="tablist"
-         [attr.aria-activedescendant]="'tab-content-' + selectedTab.tabId">
+         [attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
       <div class="tab-bar">
         <button *for="#tab of tabs"
           role="tab"
@@ -48,19 +48,6 @@ export class Tabs  {
   ) {
     this.domElement = ngElement.domElement
 
-    // should be used to cover up sibling .nav-pane's and it's parent
-    this.domElement.classList.add('nav-pane-cover-parent')
-
-    // .tab-bar-top/bottom should be added to the entire element when specified
-    // TODO: MAKE MORE GOOD!!!
-    setTimeout(() => {
-      if (this.placement == 'top') {
-        this.domElement.classList.add('tab-bar-top')
-      } else {
-        this.domElement.classList.add('tab-bar-bottom')
-      }
-    })
-
     this.config = Tabs.config.invoke(this)
     this.tabs = []
   }
@@ -93,14 +80,14 @@ export class Tabs  {
 
 new IonicComponent(Tabs, {
   bind: {
-    placement: {
+    'tab-bar-placement': {
       defaults: {
         ios: 'bottom',
         android: 'top',
         core: 'bottom'
       }
     },
-    tabBarIcons: {
+    'tab-bar-icons': {
       defaults: {
         ios: 'top',
         android: 'none',

src/components/tabs/tabs.scss

@@ -16,11 +16,11 @@ $tab-bar-item-max-width:           160px !default;
   height: 100%;
 }
 
-.tab-bar-top > .tab-bar-container {
+[tab-bar-placement="top"] > .tab-bar-container {
   @include flex-order($flex-order-tab-bar-top);
 }
 
-.tab-bar-bottom > .tab-bar-container {
+[tab-bar-placement="bottom"] > .tab-bar-container {
   @include flex-order($flex-order-tab-bar-bottom);
 }