feat(tab-nav-bar): add initial functionality of tab nav bar

src/demo-app/demo-app-module.ts

@@ -32,9 +32,7 @@ import {SidenavDemo} from './sidenav/sidenav-demo';
 import {SnackBarDemo} from './snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from './portal/portal-demo';
 import {MenuDemo} from './menu/menu-demo';
-import {TabsDemo} from './tabs/tab-group-demo';
-
-
+import {TabsDemoModule} from './tabs/tabs-demo.module';
 
 @NgModule({
   imports: [
@@ -43,6 +41,7 @@ import {TabsDemo} from './tabs/tab-group-demo';
     HttpModule,
     RouterModule.forRoot(DEMO_APP_ROUTES),
     MaterialModule.forRoot(),
+    TabsDemoModule,
   ],
   declarations: [
     BaselineDemo,
@@ -76,7 +75,6 @@ import {TabsDemo} from './tabs/tab-group-demo';
     SliderDemo,
     SlideToggleDemo,
     SpagettiPanel,
-    TabsDemo,
     ToolbarDemo,
     TooltipDemo,
   ],

src/demo-app/demo-app/routes.ts

@@ -3,7 +3,7 @@ import {Home} from './demo-app';
 import {ButtonDemo} from '../button/button-demo';
 import {BaselineDemo} from '../baseline/baseline-demo';
 import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
-import {TabsDemo} from '../tabs/tab-group-demo';
+import {TabsDemo} from '../tabs/tabs-demo';
 import {GridListDemo} from '../grid-list/grid-list-demo';
 import {GesturesDemo} from '../gestures/gestures-demo';
 import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
@@ -27,7 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-
+import {TABS_DEMO_ROUTES} from '../tabs/routes';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -51,7 +51,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'live-announcer', component: LiveAnnouncerDemo},
   {path: 'gestures', component: GesturesDemo},
   {path: 'grid-list', component: GridListDemo},
-  {path: 'tabs', component: TabsDemo},
+  {path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
   {path: 'button-toggle', component: ButtonToggleDemo},
   {path: 'baseline', component: BaselineDemo},
   {path: 'ripple', component: RippleDemo},

src/demo-app/tabs/routes.ts

@@ -0,0 +1,10 @@
+import {Routes} from '@angular/router';
+
+import {SunnyTabContent, RainyTabContent, FoggyTabContent} from '../tabs/tabs-demo';
+
+export const TABS_DEMO_ROUTES: Routes = [
+  { path: '', redirectTo: 'sunny-tab', pathMatch: 'full' },
+  { path: 'sunny-tab', component: SunnyTabContent },
+  { path: 'rainy-tab', component: RainyTabContent },
+  { path: 'foggy-tab', component: FoggyTabContent },
+];

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

@@ -1,3 +1,19 @@
+<h1>Tab Nav Bar</h1>
+
+<div class="demo-nav-bar">
+  <md-tab-nav-bar>
+    <a md-tab-link
+       *ngFor="let tabLink of tabLinks; let i = index"
+       [routerLink]="tabLink.link"
+       [active]="activeLinkIndex === i"
+       (click)="activeLinkIndex = i">
+      {{tabLink.label}}
+    </a>
+  </md-tab-nav-bar>
+  <router-outlet></router-outlet>
+</div>
+
+
 <h1>Tab Group Demo</h1>
 
 <md-tab-group class="demo-tab-group">
@@ -13,6 +29,7 @@ <h1>Tab Group Demo</h1>
   </md-tab>
 </md-tab-group>
 
+
 <h1>Async Tabs</h1>
 
 <md-tab-group class="demo-tab-group">

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

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {MaterialModule} from '@angular/material';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+
+import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs-demo';
+
+@NgModule({
+  imports: [
+    FormsModule,
+    BrowserModule,
+    MaterialModule,
+    RouterModule,
+  ],
+  declarations: [
+    TabsDemo,
+    SunnyTabContent,
+    RainyTabContent,
+    FoggyTabContent,
+  ]
+})
+export class TabsDemoModule {}

src/demo-app/tabs/tabs-demo.scss

@@ -0,0 +1,22 @@
+.demo-nav-bar {
+  border: 1px solid #e0e0e0;
+  .md-tab-header {
+    background: #f9f9f9;
+  }
+  sunny-routed-content,
+  rainy-routed-content,
+  foggy-routed-content {
+    display: block;
+    padding: 12px;
+  }
+}
+
+.demo-tab-group {
+  border: 1px solid #e0e0e0;
+  .md-tab-header {
+    background: #f9f9f9;
+  }
+  .md-tab-body {
+    padding: 12px;
+  }
+}

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

@@ -0,0 +1,65 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {Router} from '@angular/router';
+import {Observable} from 'rxjs/Observable';
+
+@Component({
+  moduleId: module.id,
+  selector: 'tabs-demo',
+  templateUrl: 'tabs-demo.html',
+  styleUrls: ['tabs-demo.css'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class TabsDemo {
+  tabLinks = [
+    { label: 'Sun', link: 'sunny-tab'},
+    { label: 'Rain', link: 'rainy-tab'},
+    { label: 'Fog', link: 'foggy-tab'},
+  ];
+  activeLinkIndex = 0;
+
+  tabs = [
+    { label: 'Tab One', content: 'This is the body of the first tab' },
+    { label: 'Tab Two', content: 'This is the body of the second tab' },
+    { label: 'Tab Three', content: 'This is the body of the third tab' },
+  ];
+
+  asyncTabs: Observable<any>;
+
+  constructor(private router: Router) {
+    this.asyncTabs = Observable.create((observer: any) => {
+      setTimeout(() => {
+        observer.next(this.tabs);
+      }, 1000);
+    });
+
+    // Initialize the index by checking if a tab link is contained in the url.
+    // This is not an ideal check and can be removed if routerLink exposes if it is active.
+    // https://github.com/angular/angular/pull/12525
+    this.activeLinkIndex =
+        this.tabLinks.findIndex(routedTab => router.url.indexOf(routedTab.link) != -1);
+  }
+}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'sunny-routed-content',
+  template: 'This is the routed body of the sunny tab.',
+})
+export class SunnyTabContent {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'rainy-routed-content',
+  template: 'This is the routed body of the rainy tab.',
+})
+export class RainyTabContent {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'foggy-routed-content',
+  template: 'This is the routed body of the foggy tab.',
+})
+export class FoggyTabContent {}

src/lib/index.ts

@@ -20,5 +20,6 @@ export * from './slider/index';
 export * from './slide-toggle/index';
 export * from './snack-bar/index';
 export * from './tabs/index';
+export * from './tabs/tab-nav-bar/index';
 export * from './toolbar/index';
 export * from './tooltip/index';

src/lib/tabs/tab-group.scss

@@ -1,52 +1,15 @@
 @import '../core/style/variables';
-
-
-$md-tab-bar-height: 48px !default;
+@import './tabs-common';
 
 :host {
   display: flex;
   flex-direction: column;
   font-family: $md-font-family;
 }
 
-// The top section of the view; contains the tab labels
-.md-tab-header {
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-}
-
-// Wraps each tab label 
+// 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;
-  }
-}
-
-@media ($md-xsmall) {
-  .md-tab-label {
-    min-width: 72px;
-  }
-}
-
-.md-tab-disabled {
-  cursor: default;
-  pointer-events: none;
+  @include tab-label;
 }
 
 // The bottom section of the view; contains the tab bodies 
@@ -67,12 +30,4 @@ $md-tab-bar-height: 48px !default;
   &.md-tab-active {
     display: block;
   }
-}
-
-// The colored bar that underlines the active tab 
-md-ink-bar {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  transition: 350ms ease-out;
-}
+}

src/lib/tabs/tab-nav-bar/index.ts

@@ -0,0 +1 @@
+export * from './tab-nav-bar';

src/lib/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/lib/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -0,0 +1,10 @@
+@import '../tabs-common';
+
+:host {
+  display: block;
+}
+
+a[md-tab-link] {
+  @include tab-label;
+  text-decoration: none;
+}

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -0,0 +1,55 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MdTabsModule} from '../tabs';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+
+
+describe('MdTabNavBar', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdTabsModule.forRoot()],
+      declarations: [
+        SimpleTabNavBarTestApp
+      ],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  describe('basic behavior', () => {
+    let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+    });
+
+    it('should change active index on click', () => {
+      let component = fixture.debugElement.componentInstance;
+
+      // select the second link
+      let tabLink = fixture.debugElement.queryAll(By.css('a'))[1];
+      tabLink.nativeElement.click();
+      expect(component.activeIndex).toBe(1);
+
+      // select the third link
+      tabLink = fixture.debugElement.queryAll(By.css('a'))[2];
+      tabLink.nativeElement.click();
+      expect(component.activeIndex).toBe(2);
+    });
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `
+    <md-tab-nav-bar>
+      <a md-tab-link [active]="activeIndex === 0" (click)="activeIndex = 0">Tab One</a>
+      <a md-tab-link [active]="activeIndex === 1" (click)="activeIndex = 1">Tab Two</a>
+      <a md-tab-link [active]="activeIndex === 2" (click)="activeIndex = 2">Tab Three</a>
+    </md-tab-nav-bar>
+  `
+})
+class SimpleTabNavBarTestApp {
+  activeIndex = 0;
+}