feat(tabs): add the ability to invert the header (#2391)

Adds the ability to set the tab header position to the bottom. This inverts the tabs and the ink bar.

Fixes #2387.

Author: crisbeto

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

@@ -210,3 +210,13 @@ <h1>Tabs with simplified api</h1>
     This tab is about combustion!
   </md-tab>
 </md-tab-group>
+
+<h1>Inverted tabs</h1>
+<md-tab-group class="demo-tab-group" headerPosition="below">
+  <md-tab label="Earth">
+    This tab is about the Earth!
+  </md-tab>
+  <md-tab label="Fire">
+    This tab is about combustion!
+  </md-tab>
+</md-tab-group>

src/lib/tabs/_tabs-common.scss

@@ -39,4 +39,9 @@ $md-tab-animation-duration: 500ms !default;
   bottom: 0;
   height: 2px;
   transition: $md-tab-animation-duration $ease-in-out-curve-function;
+
+  .md-tab-group-inverted-header & {
+    bottom: auto;
+    top: 0;
+  }
 }

src/lib/tabs/_tabs-theme.scss

@@ -1,23 +1,28 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
-
 @mixin md-tabs-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $header-border: 1px solid md-color($background, status-bar);
 
   [md-tab-nav-bar],
   .md-tab-header {
-    border-bottom: 1px solid md-color($background, status-bar);
+    border-bottom: $header-border;
+
+    .md-tab-group-inverted-header & {
+      border-top: $header-border;
+      border-bottom: none;
+    }
   }
-  
+
   .md-tab-label:focus {
     background-color: md-color($primary, 100, 0.3);
   }
-  
+
   md-ink-bar {
     background-color: md-color($primary, 500);
   }

src/lib/tabs/tab-group.scss

@@ -6,6 +6,10 @@
   display: flex;
   flex-direction: column;
   font-family: $md-font-family;
+
+  &.md-tab-group-inverted-header {
+    flex-direction: column-reverse;
+  }
 }
 
 // Wraps each tab label

src/lib/tabs/tab-group.spec.ts

@@ -1,7 +1,7 @@
 import {
     async, fakeAsync, tick, ComponentFixture, TestBed
 } from '@angular/core/testing';
-import {MdTabGroup, MdTabsModule} from './tab-group';
+import {MdTabGroup, MdTabsModule, MdTabHeaderPosition} from './tab-group';
 import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {Observable} from 'rxjs/Observable';
@@ -247,6 +247,17 @@ describe('MdTabGroup', () => {
     it('should support @ViewChild in the tab content', () => {
       expect(fixture.componentInstance.legumes).toBeTruthy();
     });
+
+    it('should support setting the header position', () => {
+      let tabGroupNode = fixture.debugElement.query(By.css('md-tab-group')).nativeElement;
+
+      expect(tabGroupNode.classList).not.toContain('md-tab-group-inverted-header');
+
+      tabGroup.headerPosition = 'below';
+      fixture.detectChanges();
+
+      expect(tabGroupNode.classList).toContain('md-tab-group-inverted-header');
+    });
   });
 
   /**
@@ -282,6 +293,7 @@ describe('MdTabGroup', () => {
   template: `
     <md-tab-group class="tab-group"
         [(selectedIndex)]="selectedIndex"
+        [headerPosition]="headerPosition"
         (focusChange)="handleFocus($event)"
         (selectChange)="handleSelection($event)">
       <md-tab>
@@ -303,6 +315,7 @@ class SimpleTabsTestApp {
   selectedIndex: number = 1;
   focusEvent: any;
   selectEvent: any;
+  headerPosition: MdTabHeaderPosition = 'above';
   handleFocus(event: any) {
     this.focusEvent = event;
   }

src/lib/tabs/tab-group.ts

@@ -39,6 +39,9 @@ export class MdTabChangeEvent {
   tab: MdTab;
 }
 
+/** Possible positions for the tab header. */
+export type MdTabHeaderPosition = 'above' | 'below';
+
 /**
  * Material design tab-group component.  Supports basic tab pairs (label + content) and includes
  * animated ink-bar, keyboard navigation, and screen reader.
@@ -49,7 +52,10 @@ export class MdTabChangeEvent {
   selector: 'md-tab-group',
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
-  host: { '[class.md-tab-group-dynamic-height]': 'dynamicHeight' }
+  host: {
+    '[class.md-tab-group-dynamic-height]': 'dynamicHeight',
+    '[class.md-tab-group-inverted-header]': 'headerPosition === "below"',
+  }
 })
 export class MdTabGroup {
   @ContentChildren(MdTab) _tabs: QueryList<MdTab>;
@@ -83,6 +89,10 @@ export class MdTabGroup {
   set selectedIndex(value: number) { this._indexToSelect = value; }
   get selectedIndex(): number { return this._selectedIndex; }
 
+  /** Position of the tab header. */
+  @Input()
+  headerPosition: MdTabHeaderPosition = 'above';
+
   /** Output to enable support for two-way binding on `selectedIndex`. */
   @Output() get selectedIndexChange(): Observable<number> {
     return this.selectChange.map(event => event.index);