nav bar link extends ripple to get auto-ripple

angular · Nov 3, 2016 · 7288958 · 7288958
1 parent 6733518
commit 7288958
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
@@ -2,7 +2,7 @@ <h1>Tab Nav Bar</h1>
 
 <div class="demo-nav-bar">
   <nav md-tab-nav-bar aria-label="weather navigation links">
-    <a md-tab-link md-ripple
+    <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
        [active]="activeLinkIndex === i"

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,8 @@
 // Wraps each link in the header
 [md-tab-link] {
   @include tab-label;
-  text-decoration: none;
+  text-decoration: none;  // Removes anchor underline styling
+  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.
@@ -24,7 +25,7 @@ export class MdTabNavBar {
 @Directive({
   selector: '[md-tab-link]',
 })
-export class MdTabLink {
+export class MdTabLink extends MdRipple {
   private _isActive: boolean = false;
 
   @Input()
@@ -39,5 +40,7 @@ export class MdTabLink {
     }
   }
 
-  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
+  constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {
+    super(_element);
+  }
 }