diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts index 88007172..04fd6d38 100644 --- a/ng2-material/components/button/button.ts +++ b/ng2-material/components/button/button.ts @@ -30,10 +30,7 @@ export class MdButton { /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */ isKeyboardFocused: boolean = false; - private _noInk: boolean = false; - - constructor(private _element: ElementRef, @Attribute('md-no-ink') mdNoInk: string) { - this._noInk = isPresent(mdNoInk); + constructor(private _element: ElementRef) { } onMousedown(event) { @@ -46,7 +43,7 @@ export class MdButton { this.isMouseDown = false }, 100); - if (!this._noInk) { + if (Ink.canApply(this._element.nativeElement)) { Ink.rippleEvent(this._element.nativeElement, event); } } diff --git a/ng2-material/components/tabs/tabs.html b/ng2-material/components/tabs/tabs.html index 028c17ac..4a494811 100644 --- a/ng2-material/components/tabs/tabs.html +++ b/ng2-material/components/tabs/tabs.html @@ -4,7 +4,7 @@ ; - constructor(@Attribute('mdNoScroll') private _mdNoScroll: string) { + @Input() mdNoScroll: boolean = false; + + constructor(private _element: ElementRef, + @Attribute('mdNoScroll') noScroll: string) { + this.mdNoScroll = isPresent(noScroll); } private _selectedIndex: number = -1; @@ -50,14 +61,6 @@ export class MdTabs implements AfterContentInit { } } - ngAfterContentInit(): any { - setTimeout(()=> { - if (this._selectedIndex === -1) { - this.select(this.panes.toArray()[0]); - } - }, 0); - } - get selected(): MdTab { let result = null; this.panes.toArray().forEach((p: MdTab) => { @@ -68,8 +71,27 @@ export class MdTabs implements AfterContentInit { return result; } - select(pane: MdTab) { this.panes.toArray().forEach((p: MdTab) => p.active = p == pane); } + + clickTabButton(pane: MdTab, event?) { + if (event && Ink.canApply(event.target)) { + Ink.rippleEvent(event.target, event); + } + this.select(pane); + } + + ngAfterContentInit(): any { + setTimeout(()=> { + if (this._selectedIndex === -1) { + this.select(this.panes.toArray()[0]); + } + }, 0); + } + + ngOnChanges(changes: {}): any { + + } + } diff --git a/ng2-material/core/util/ink.ts b/ng2-material/core/util/ink.ts index be7f7bb4..7841da2f 100644 --- a/ng2-material/core/util/ink.ts +++ b/ng2-material/core/util/ink.ts @@ -7,6 +7,14 @@ import {Animate} from "./animate"; */ export class Ink { + /** + * Determine if ink can be applied to a given element. + * @param element The element to check + */ + static canApply(element: HTMLElement): boolean { + return !DOM.hasAttribute(element, 'md-no-ink'); + } + /** * Ink ripples are equal in height/width, so get the scalar size * of the container.