Skip to content

Commit f88baad

Browse files
committed
extract ripple directive from the md tab link
1 parent 0b4a466 commit f88baad

File tree

2 files changed

+16
-6
lines changed

2 files changed

+16
-6
lines changed

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export class MdTabNavBar {
2525
@Directive({
2626
selector: '[md-tab-link]',
2727
})
28-
export class MdTabLink extends MdRipple {
28+
export class MdTabLink {
2929
private _isActive: boolean = false;
3030

3131
@Input()
@@ -40,7 +40,18 @@ export class MdTabLink extends MdRipple {
4040
}
4141
}
4242

43-
constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {
43+
constructor(private _mdTabNavBar: MdTabNavBar, private _element: ElementRef) {}
44+
}
45+
46+
/**
47+
* Simple directive that extends the ripple and matches the selector of the MdTabLink. This
48+
* adds the ripple behavior to nav bar labels.
49+
*/
50+
@Directive({
51+
selector: '[md-tab-link]',
52+
})
53+
export class MdTabLinkRipple extends MdRipple {
54+
constructor(private _element: ElementRef) {
4455
super(_element);
4556
}
4657
}

src/lib/tabs/tabs.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
} from '../core';
2727
import {MdTabLabel} from './tab-label';
2828
import {MdTabLabelWrapper} from './tab-label-wrapper';
29-
import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
29+
import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
3030
import {MdInkBar} from './ink-bar';
3131
import {Observable} from 'rxjs/Observable';
3232
import 'rxjs/add/operator/map';
@@ -35,7 +35,6 @@ import {MdRippleModule} from '../core/ripple/ripple';
3535

3636
/** Used to generate unique ID's for each tab component */
3737
let nextId = 0;
38-
3938
/** A simple change event emitted on focus or selection changes. */
4039
export class MdTabChangeEvent {
4140
index: number;
@@ -255,9 +254,9 @@ export class MdTabGroup {
255254
@NgModule({
256255
imports: [CommonModule, PortalModule, MdRippleModule],
257256
// Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
258-
exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
257+
exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink, MdTabLinkRipple],
259258
declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
260-
MdTabNavBar, MdTabLink],
259+
MdTabNavBar, MdTabLink, MdTabLinkRipple],
261260
})
262261
export class MdTabsModule {
263262
static forRoot(): ModuleWithProviders {

0 commit comments

Comments
 (0)