feat(navbarStyle): set navbar color by config/attr

ionic/components/app/id.ts

@@ -1,4 +1,4 @@
-import {AppViewManager, ElementRef, Directive} from 'angular2/angular2';
+import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from './app';
 
@@ -47,3 +47,15 @@ export class IdRef {
     this.app.unregister(this.id);
   }
 }
+
+
+@Directive({
+  selector: '[attr]',
+  inputs: ['attr']
+})
+export class Attr {
+  constructor(private renderer: Renderer, private elementRef: ElementRef) {}
+  onInit() {
+    this.renderer.setElementAttribute(this.elementRef, this.attr, '');
+  }
+}

ionic/components/navbar/navbar.ts

@@ -69,7 +69,8 @@ class BackButtonText extends Ion {
     '[hidden]': '_hidden'
   },
   inputs: [
-    'hideBackButton'
+    'hideBackButton',
+    'navbarStyle'
   ],
   directives: [BackButton, BackButtonText, Icon]
 })
@@ -82,9 +83,16 @@ export class Navbar extends ToolbarBase {
     renderer: Renderer
   ) {
     super(elementRef, config);
+    this.app = app;
+    this.renderer = renderer;
+
     renderer.setElementClass(elementRef, 'toolbar', true);
 
-    this.app = app;
+    let navbarStyle = config.get('navbarStyle');
+    if (navbarStyle) {
+      renderer.setElementAttribute(elementRef, navbarStyle, '');
+    }
+
     viewCtrl && viewCtrl.setNavbar(this);
 
     this.bbIcon = config.get('backButtonIcon');
@@ -92,10 +100,15 @@ export class Navbar extends ToolbarBase {
   }
 
   onInit() {
+    super.onInit();
     let hideBackButton = this.hideBackButton;
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
     }
+    
+    if (this.navbarStyle) {
+      this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
+    }
   }
 
   getBackButtonRef() {

ionic/components/tabs/tabs.ts

@@ -1,24 +1,14 @@
-import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef, Renderer} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
+import {Attr} from '../app/id';
 import {Config} from '../../config/config';
 import {ViewController} from '../nav/view-controller';
 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._