feat(tabbarStyle): set tabbar color from config/attr

Closes #436

ionic/components/tabs/modes/ios.scss

@@ -88,3 +88,11 @@ ion-tabs[tabbar-placement=top] tabbar {
   }
 
 }
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    border-color: darken($color-value, 10%);
+  }
+
+}

ionic/components/tabs/tabs.scss

@@ -87,10 +87,11 @@ tabbar {
   border: 0;
   border-radius: 0;
   background: none;
+}
 
-  &:hover:not(.disable-hover) {
+.tab-button:hover:not(.disable-hover),
+.tab-button[aria-selected=true] {
   color: $tab-button-active-color;
-  }
 }
 
 .tab-button-text {
@@ -121,10 +122,6 @@ tabbar {
   white-space: normal;
 }
 
-.tab-button[aria-selected=true] {
-  color: $tab-button-active-color;
-}
-
 tab-highlight {
   display: none;
 }
@@ -157,3 +154,24 @@ tab-highlight {
 [tabbar-icons=hide] .tab-button-icon {
   display: none;
 }
+
+
+// Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  tabbar[#{$color-name}] {
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
+  }
+
+}

ionic/components/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -8,6 +8,17 @@ import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
 
 
+@Directive({
+  selector: '[attr]',
+  inputs: ['attr']
+})
+class Attr {
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+  onInit() {
+    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
+  }
+}
+
 /**
  * _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
  * of the Component docs._
@@ -63,6 +74,7 @@ import {Icon} from '../icon/icon';
   defaultInputs: {
     'tabbarPlacement': 'bottom',
     'tabbarIcons': 'top',
+    'tabbarStyle': 'default',
     'preloadTabs': true
   },
   template:
@@ -70,7 +82,7 @@ import {Icon} from '../icon/icon';
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
-      '<tabbar role="tablist">' +
+      '<tabbar role="tablist" [attr]="tabbarStyle">' +
         '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
@@ -85,6 +97,7 @@ import {Icon} from '../icon/icon';
     Icon,
     NgFor,
     NgIf,
+    Attr,
     forwardRef(() => TabButton),
     forwardRef(() => TabHighlight),
     forwardRef(() => TabNavBarAnchor)

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

@@ -8,14 +8,24 @@
     <ion-navbar *navbar>
       <ion-title>Heart</ion-title>
     </ion-navbar>
-    <ion-content padding>
+    <ion-content>
-      <h2>Tab 1</h2>
+      <ion-list>
+        <ion-header>
+          Tab 1
+        </ion-header>
+        <ion-item *ng-for="#i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
+      </ion-list>
     </ion-content>
     `
 })
 class Tab1 {
   constructor(nav: NavController) {
     this.nav = nav;
+
+    this.items = [];
+    for(var i = 1; i <= 250; i++) {
+      this.items.push(i);
+    }
   }
 }
 
@@ -25,16 +35,33 @@ class Tab1 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <ion-title>Star</ion-title>
+      <ion-title>Schedule</ion-title>
     </ion-navbar>
-    <ion-content padding>
+    <ion-content>
-      <h2>Tab 2</h2>
+      <ion-list>
+        <ion-item-sliding *ng-for="#session of sessions" #sliding-item>
+          <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>
   `
 })
 class Tab2 {
-  constructor(nav: NavController) {
+  constructor() {
-    this.nav = nav;
+    this.sessions = [];
+    for(var i = 1; i <= 250; i++) {
+      this.sessions.push({
+        name: 'Name ' + i,
+        location: 'Location: ' + i
+      });
+    }
   }
 }
 
@@ -54,11 +81,8 @@ class Tab2 {
     </ion-content>
     `
 })
-class Tab3 {
+class Tab3 {}
-  constructor(nav: NavController) {
+
-    this.nav = nav;
-  }
-}
 
 @App({
   template: `
@@ -75,9 +99,9 @@ class Tab3 {
       </ion-content>
     </ion-menu>
 
-    <ion-tabs #content>
+    <ion-tabs #content tabbar-style="secondary">
-      <ion-tab tab-title="Heart" tab-icon="heart" [root]="root1"></ion-tab>
+      <ion-tab tab-title="Plain List" tab-icon="star" [root]="root1"></ion-tab>
-      <ion-tab tab-title="Star" tab-icon="star" [root]="root2"></ion-tab>
+      <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
       <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
   `

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

@@ -59,3 +59,11 @@
   <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Last Crusade"></ion-tab>
 </ion-tabs>
+
+
+<!-- primary color tabbar -->
+<ion-tabs no-navbar tabbar-style="primary">
+  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tab-icon="settings"></ion-tab>
+</ion-tabs>