Skip to content

Commit 2335dc8

Browse files
committed
extract ripple directive from the md tab link
1 parent 53907cd commit 2335dc8

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
@@ -38,7 +38,7 @@ import {
3838
} from '../core';
3939
import {MdTabLabel} from './tab-label';
4040
import {MdTabLabelWrapper} from './tab-label-wrapper';
41-
import {MdTabNavBar, MdTabLink} from './tab-nav-bar/tab-nav-bar';
41+
import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
4242
import {MdInkBar} from './ink-bar';
4343
import {Observable} from 'rxjs/Observable';
4444
import 'rxjs/add/operator/map';
@@ -47,7 +47,6 @@ import {MdRippleModule} from '../core/ripple/ripple';
4747

4848
/** Used to generate unique ID's for each tab component */
4949
let nextId = 0;
50-
5150
/** A simple change event emitted on focus or selection changes. */
5251
export class MdTabChangeEvent {
5352
index: number;
@@ -378,9 +377,9 @@ export class MdTabBody implements OnInit {
378377
@NgModule({
379378
imports: [CommonModule, PortalModule, MdRippleModule],
380379
// Don't export MdInkBar or MdTabLabelWrapper, as they are internal implementation details.
381-
exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink],
380+
exports: [MdTabGroup, MdTabLabel, MdTab, MdTabNavBar, MdTabLink, MdTabLinkRipple],
382381
declarations: [MdTabGroup, MdTabLabel, MdTab, MdInkBar, MdTabLabelWrapper,
383-
MdTabNavBar, MdTabLink, MdTabBody],
382+
MdTabNavBar, MdTabLink, MdTabBody, MdTabLinkRipple],
384383
})
385384
export class MdTabsModule {
386385
static forRoot(): ModuleWithProviders {

0 commit comments

Comments
 (0)