refactor(tabs): provide method for re-aligning the ink bar (#10343)

Adds the `realignInkBar` method to the `MatTabGroup` which allows consumers to re-align the ink bar programmatically. This is useful for the cases where Material can't figure out that it needs to be re-aligned or doing so would be very inefficient.

Fixes #10340.
This commit is contained in:
Kristiyan Kostadinov
2018-04-13 00:38:19 +02:00
committed by tinayuangao
parent 5deb829960
commit 923c733b28
2 changed files with 10 additions and 1 deletions
+9
View File
@@ -83,6 +83,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
@ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef;
@ViewChild('tabHeader') _tabHeader: MatTabHeader;
/** The tab index that should be selected after the content has been checked. */
private _indexToSelect: number | null = 0;
@@ -208,6 +210,13 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
this._tabLabelSubscription.unsubscribe();
}
/** Re-aligns the ink bar to the selected tab element. */
realignInkBar() {
if (this._tabHeader) {
this._tabHeader._alignInkBarToSelectedTab();
}
}
_focusChanged(index: number) {
this.focusChange.emit(this._createChangeEvent(index));
}
+1 -1
View File
@@ -448,7 +448,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
}
/** Tells the ink-bar to align itself to the current label wrapper */
private _alignInkBarToSelectedTab(): void {
_alignInkBarToSelectedTab(): void {
const selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length ?
this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement :
null;