diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts index 0dff8ce6a3c8..a8a6a30ad873 100644 --- a/src/lib/tabs/ink-bar.ts +++ b/src/lib/tabs/ink-bar.ts @@ -6,8 +6,33 @@ * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, NgZone} from '@angular/core'; +import { Directive, ElementRef, Inject, InjectionToken, NgZone } from '@angular/core'; +/** + * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink + * bar in a set of tabs. + */ +// tslint:disable-next-line class-name Using leading underscore to denote internal interface. +export interface _MatInkBarPositioner { + (element: HTMLElement): { left: string, width: string }; +} + +/** Injection token for the MatInkBar's Positioner. */ +export const _MAT_INK_BAR_POSITIONER = + new InjectionToken<_MatInkBarPositioner>('MatInkBarPositioner', { + providedIn: 'root', + factory: () => _matInkBarPositioner + }); + +/** + * The default positioner function for the MatInkBar. + */ +export const _matInkBarPositioner: _MatInkBarPositioner = (element: HTMLElement) => { + return { + left: element ? (element.offsetLeft || 0) + 'px' : '0', + width: element ? (element.offsetWidth || 0) + 'px' : '0', + }; +}; /** * The ink-bar is used to display and animate the line underneath the current active tab label. @@ -22,7 +47,8 @@ import {Directive, ElementRef, NgZone} from '@angular/core'; export class MatInkBar { constructor( private _elementRef: ElementRef, - private _ngZone: NgZone) {} + private _ngZone: NgZone, + @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { } /** * Calculates the styles from the provided element in order to align the ink-bar to that element. @@ -56,9 +82,10 @@ export class MatInkBar { * @param element */ private _setStyles(element: HTMLElement) { + const positions = this._inkBarPositioner(element); const inkBar: HTMLElement = this._elementRef.nativeElement; - inkBar.style.left = element ? (element.offsetLeft || 0) + 'px' : '0'; - inkBar.style.width = element ? (element.offsetWidth || 0) + 'px' : '0'; + inkBar.style.left = positions.left; + inkBar.style.width = positions.width; } } diff --git a/src/lib/tabs/public-api.ts b/src/lib/tabs/public-api.ts index f837434ba87b..60b7fb6a9221 100644 --- a/src/lib/tabs/public-api.ts +++ b/src/lib/tabs/public-api.ts @@ -8,7 +8,7 @@ export * from './tabs-module'; export * from './tab-group'; -export {MatInkBar} from './ink-bar'; +export {MatInkBar, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER} from './ink-bar'; export { MatTabBody, MatTabBodyOriginState,