Add color and background attributes to demo

Author: willshowell

src/demo-app/tabs/tabs-demo.html

@@ -3,9 +3,10 @@ <h1>Tab Nav Bar</h1>
 <button md-button (click)="tabLinks.shift()">Remove tab</button>
 <button md-button (click)="swapTabLinks()">Swap first two</button>
 <button md-button (click)="addToLabel()">Add to labels</button>
+<button md-button (click)="toggleBackground()">Toggle background</button>
 
 <div class="demo-nav-bar">
-  <nav md-tab-nav-bar aria-label="weather navigation links">
+  <nav md-tab-nav-bar aria-label="weather navigation links" [background]="tabNavBackground">
     <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
@@ -247,3 +248,31 @@ <h1>Inverted tabs</h1>
     </div>
   </md-tab>
 </md-tab-group>
+
+<h1>Accent tabs</h1>
+<md-tab-group class="demo-tab-group" color="accent">
+  <md-tab label="Earth">
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
+  </md-tab>
+  <md-tab label="Fire">
+    <div class="tab-content">
+      This tab is about combustion!
+    </div>
+  </md-tab>
+</md-tab-group>
+
+<h1>Tabs with background color</h1>
+<md-tab-group class="demo-tab-group" background="primary" color="accent">
+  <md-tab label="Earth">
+    <div class="tab-content">
+      This tab is about the Earth!
+    </div>
+  </md-tab>
+  <md-tab label="Fire">
+    <div class="tab-content">
+      This tab is about combustion!
+    </div>
+  </md-tab>
+</md-tab-group>

src/demo-app/tabs/tabs-demo.ts

@@ -16,6 +16,8 @@ export class TabsDemo {
     {label: 'Fog', link: 'foggy-tab'},
   ];
 
+  tabNavBackground: any = undefined;
+
   // Standard tabs demo
   tabs = [
     {
@@ -93,6 +95,10 @@ export class TabsDemo {
   addToLabel() {
     this.tabLinks.forEach(link => link.label += 'extracontent');
   }
+
+  toggleBackground() {
+    this.tabNavBackground = this.tabNavBackground ? undefined : 'primary';
+  }
 }