mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
tinayuangao
parent
5deb829960
commit
923c733b28
@@ -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));
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user