WIP: feat(tab-nav-bar): initial implementation

src/components/tabs/tab-group.scss

@@ -1,7 +1,6 @@
 @import 'variables';
 @import 'default-theme';
-
-$md-tab-bar-height: 48px !default;
+@import './tabs-common';
 
 :host {
   display: flex;
@@ -11,33 +10,13 @@ $md-tab-bar-height: 48px !default;
 
 /** The top section of the view; contains the tab labels */
 .md-tab-header {
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: row;
+  @include tab-header;
   border-bottom: 1px solid md-color($md-background, status-bar);
-  flex-shrink: 0;
 }
 
 /** Wraps each tab label */
 .md-tab-label {
-  line-height: $md-tab-bar-height;
-  height: $md-tab-bar-height;
-  padding: 0 12px;
-  font-size: $md-body-font-size-base;
-  font-family: $md-font-family;
-  font-weight: 500;
-  cursor: pointer;
-  box-sizing: border-box;
-  color: currentColor;
-  opacity: 0.6;
-  min-width: 160px;
-  text-align: center;
-  &:focus {
-    outline: none;
-    opacity: 1;
-    background-color: md-color($md-primary, 100, 0.3);
-  }
+  @include tab-label;
 }
 
 .md-tab-disabled {
@@ -60,16 +39,7 @@ $md-tab-bar-height: 48px !default;
   box-sizing: border-box;
   flex-grow: 1;
   flex-shrink: 1;
-  &.md-active {
+  &.md-tab-active {
     display: block;
   }
 }
-
-/** The colored bar that underlines the active tab */
-md-ink-bar {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: md-color($md-primary, 500);
-  transition: 350ms ease-out;
-}

src/components/tabs/tab-nav-bar/tab-link.scss

@@ -0,0 +1,5 @@
+@import '../tabs-common';
+
+:host {
+  @include tab-label;
+}

src/components/tabs/tab-nav-bar/tab-nav-bar.html

@@ -0,0 +1,4 @@
+<div class="md-tab-header">
+  <ng-content></ng-content>
+  <md-ink-bar></md-ink-bar>
+</div>

src/components/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -0,0 +1,13 @@
+@import '../tabs-common';
+
+:host {
+  display: block;
+}
+
+.md-tab-header {
+  @include tab-header;
+}
+
+md-ink-bar {
+
+}

src/components/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -0,0 +1,43 @@
+import {Component, Input, ContentChildren, QueryList, ViewChild, ElementRef,
+    forwardRef} from '@angular/core';
+import {MdInkBar} from '../ink-bar';
+
+@Component({
+  moduleId: module.id,
+  selector: 'md-tab-nav-bar',
+  templateUrl: 'tab-nav-bar.html',
+  styleUrls: ['tab-nav-bar.css'],
+})
+export class MdTabBar {
+  @ContentChildren(forwardRef(() => MdTabLink)) private _links: QueryList<MdTabLink>;
+  @ViewChild(MdInkBar) private _inkBar: MdInkBar;
+
+  updateActiveLink(element: HTMLElement) {
+    this._inkBar.alignToElement(element);
+  }
+}
+
+@Component({
+  moduleId: module.id,
+  selector: '[md-tab-link]',
+  template: '<ng-content></ng-content>',
+  styleUrls: ['tab-link.css'],
+  host: {
+    '[class.md-tab-label]': 'true'
+  }
+})
+export class MdTabLink {
+  private _isSelected: boolean = false;
+  @Input('selected')
+  get active(): boolean {
+    return this._isSelected;
+  }
+  set active(value: boolean) {
+    this._isSelected = value;
+    if (value) {
+      this._tabBar.updateActiveLink(this._element.nativeElement);
+    }
+  }
+
+  constructor(private _tabBar: MdTabBar, private _element: ElementRef) {}
+}

src/components/tabs/tabs-common.scss

@@ -0,0 +1,42 @@
+@import 'variables';
+@import 'default-theme';
+
+$md-tab-bar-height: 48px !default;
+
+@mixin tab-header {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+}
+
+@mixin tab-label {
+  line-height: $md-tab-bar-height;
+  height: $md-tab-bar-height;
+  padding: 0 12px;
+  font-size: $md-body-font-size-base;
+  font-family: $md-font-family;
+  font-weight: 500;
+  cursor: pointer;
+  box-sizing: border-box;
+  color: currentColor;
+  opacity: 0.6;
+  min-width: 160px;
+  text-align: center;
+  text-decoration: none;
+  &:focus {
+    outline: none;
+    opacity: 1;
+    background-color: md-color($md-primary, 100, 0.3);
+  }
+}
+
+/** The colored bar that underlines the active tab */
+md-ink-bar {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background-color: md-color($md-primary, 500);
+  transition: 350ms ease-out;
+}

src/components/tabs/tabs.ts

@@ -18,6 +18,7 @@ import {MdTabContent} from './tab-content';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
+import {MdTabBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
 import 'rxjs/add/operator/map';
 
 // Due to a bug in the ChromeDriver, Angular 2 keyboard events are not triggered by `sendKeys`
@@ -233,7 +234,7 @@ export class MdTabGroup {
 }
 
 /** @deprecated */
-export const MD_TABS_DIRECTIVES = [MdTabGroup, MdTabLabel, MdTabContent, MdTab];
+export const MD_TABS_DIRECTIVES = [MdTabGroup, MdTabLabel, MdTabContent, MdTab, MdTabBar, MdTabLink];
 export const TABS_INTERNAL_DIRECTIVES = [MdInkBar, MdTabLabelWrapper];
 
 @NgModule({

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

@@ -1,7 +1,15 @@
+<h1>Tab Nav Bar</h1>
+
+<md-tab-nav-bar class="demo-tab-group">
+  <a md-tab-link (click)="selectedIndex = 0" [selected]="selectedIndex == 0">One</a>
+  <a md-tab-link (click)="selectedIndex = 1" [selected]="selectedIndex == 1">Two</a>
+  <a md-tab-link (click)="selectedIndex = 2" [selected]="selectedIndex == 2">Three</a>
+</md-tab-nav-bar>
+
 <h1>Tab Group Demo</h1>
 
-<md-tab-group class="demo-tab-group">
-  <md-tab *ngFor="let tab of tabs; let i = index" [disabled]="i == 1">
+<md-tab-group class="demo-tab-group" [(selectedIndex)]="selectedIndex">
+  <md-tab *ngFor="let tab of tabs; let i = index">
     <template md-tab-label>{{tab.label}}</template>
     <template md-tab-content>
       {{tab.content}}

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

@@ -18,6 +18,7 @@ export class TabsDemo {
     { label: 'Tab Three', content: 'This is the body of the third tab' },
   ];
   asyncTabs: Observable<any>;
+  selectedIndex = 0;
   constructor() {
     this.asyncTabs = Observable.create((observer: any) => {
       setTimeout(() => {