feat(tabs): add ripples to the tab group and nav bar links (#1700)

angular · Nov 14, 2016 · b9fe75a · b9fe75a
1 parent b79c953
commit b9fe75a
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html
@@ -1,6 +1,6 @@
 <div class="md-tab-header" role="tablist"
      (keydown)="handleKeydown($event)">
-  <div class="md-tab-label" role="tab" md-tab-label-wrapper
+  <div class="md-tab-label" role="tab" md-tab-label-wrapper md-ripple
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [tabIndex]="selectedIndex == i ? 0 : -1"

diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss
@@ -16,6 +16,7 @@
 // Wraps each tab label
 .md-tab-label {
   @include tab-label;
+  position: relative;
 }
 
 @media ($md-xsmall) {

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss b/src/lib/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -9,7 +9,9 @@
 // Wraps each link in the header
 [md-tab-link] {
   @include tab-label;
-  text-decoration: none;
+  text-decoration: none;  // Removes anchor underline styling
+  position: relative;
+  overflow: hidden;  // Keeps the ripple from extending outside the element bounds
 }
 
 @media ($md-xsmall) {

diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -1,5 +1,6 @@
 import {Component, Input, ViewChild, ElementRef, ViewEncapsulation, Directive} from '@angular/core';
 import {MdInkBar} from '../ink-bar';
+import {MdRipple} from '../../core/ripple/ripple';
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -41,3 +42,16 @@ export class MdTabLink {
 
   constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
 }
+
+/**
+ * Simple directive that extends the ripple and matches the selector of the MdTabLink. This
+ * adds the ripple behavior to nav bar labels.
+ */
+@Directive({
+  selector: '[md-tab-link]',
+})
+export class MdTabLinkRipple extends MdRipple {
+  constructor(private _element: ElementRef) {
+    super(_element);
+  }
+}
diff --git a/src/lib/tabs/tabs.ts b/src/lib/tabs/tabs.ts
@@ -38,15 +38,15 @@ import {
 } from '../core';
 import {MdTabLabel} from './tab-label';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
+import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
+import {MdRippleModule} from '../core/ripple/ripple';
 
 
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
-
 /** A simple change event emitted on focus or selection changes. */
 export class MdTabChangeEvent {
   index: number;
@@ -375,11 +375,11 @@ export class MdTabBody implements OnInit {
 }
 
 @NgModule({
-  imports: [CommonModule, PortalModule],
+  imports: [CommonModule, PortalModule, MdRippleModule],
   // Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
-  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
+  exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink, MdTabLinkRipple],
   declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
-    MdTabNavBar, MdTabLink, MdTabBody],
+    MdTabNavBar, MdTabLink, MdTabBody, MdTabLinkRipple],
 })
 export class MdTabsModule {
   static forRoot(): ModuleWithProviders {