diff --git a/src/material/tabs/tab-config.ts b/src/material/tabs/tab-config.ts index f7dfddcefd74..3a35ecf8ee8b 100644 --- a/src/material/tabs/tab-config.ts +++ b/src/material/tabs/tab-config.ts @@ -39,6 +39,9 @@ export interface MatTabsConfig { /** Whether tabs should be stretched to fill the header. */ stretchTabs?: boolean; + + /** Alignment for the tabs label. */ + alignTabs?: 'start' | 'center' | 'end'; } /** Injection token that can be used to provide the default options the tabs module. */ diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index 564720e5f5aa..e150675c0eac 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -1187,6 +1187,75 @@ describe('MatTabNavBar with a default config', () => { }); }); +describe('MatTabGroup labels aligned with a config', () => { + it('should work with start align', () => { + const fixture = TestBed.configureTestingModule({ + imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig], + providers: [ + { + provide: MAT_TABS_CONFIG, + useValue: {alignTabs: 'start'}, + }, + ], + }).createComponent(TabsWithAlignConfig); + fixture.detectChanges(); + + const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="start"]'); + expect(tabElement).toBeTruthy(); + }); + + it('should work with center align', () => { + const fixture = TestBed.configureTestingModule({ + imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig], + providers: [ + { + provide: MAT_TABS_CONFIG, + useValue: {alignTabs: 'center'}, + }, + ], + }).createComponent(TabsWithAlignConfig); + fixture.detectChanges(); + + const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="center"]'); + expect(tabElement).toBeTruthy(); + }); + + it('should work with end align', () => { + const fixture = TestBed.configureTestingModule({ + imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig], + providers: [ + { + provide: MAT_TABS_CONFIG, + useValue: {alignTabs: 'end'}, + }, + ], + }).createComponent(TabsWithAlignConfig); + fixture.detectChanges(); + + const tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="end"]'); + expect(tabElement).toBeTruthy(); + }); + + it('should not add align if default config doesnt set align', () => { + const fixture = TestBed.configureTestingModule({ + imports: [MatTabsModule, BrowserAnimationsModule, TabsWithAlignConfig], + }).createComponent(TabsWithAlignConfig); + fixture.detectChanges(); + + let tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="start"]'); + expect(tabElement).toBeFalsy(); + + tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="center"]'); + expect(tabElement).toBeFalsy(); + + tabElement = fixture.nativeElement.querySelector('[mat-align-tabs="end"]'); + expect(tabElement).toBeFalsy(); + + tabElement = fixture.nativeElement.querySelector('.mat-mdc-tab-group'); + expect(tabElement).toBeTruthy(); + }); +}); + @Component({ template: ` + + First + + + Second + + + `, + standalone: true, + imports: [MatTabsModule], +}) +class TabsWithAlignConfig {} diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index 04278e02f55c..4dc9027e0aee 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -79,6 +79,7 @@ const ENABLE_BACKGROUND_INPUT = true; '[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight', '[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"', '[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs', + '[attr.mat-align-tabs]': 'alignTabs', '[style.--mat-tab-animation-duration]': 'animationDuration', }, standalone: true, @@ -122,6 +123,9 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes /** Subscription to changes in the tab labels. */ private _tabLabelSubscription = Subscription.EMPTY; + /** Alignment for tabs label via MAT_TABS_CONFIG */ + alignTabs: 'start' | 'center' | 'end' | null = null; + /** * Theme color of the tab group. This API is supported in M2 themes only, it * has no effect in M3 themes. @@ -293,6 +297,8 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes : false; this.stretchTabs = defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true; + this.alignTabs = + defaultConfig && defaultConfig.alignTabs != null ? defaultConfig.alignTabs : null; } /** diff --git a/tools/public_api_guard/material/tabs.md b/tools/public_api_guard/material/tabs.md index ea6ed4eb6606..e99a5707c905 100644 --- a/tools/public_api_guard/material/tabs.md +++ b/tools/public_api_guard/material/tabs.md @@ -507,6 +507,7 @@ export const matTabsAnimations: { // @public export interface MatTabsConfig { + alignTabs?: 'start' | 'center' | 'end'; animationDuration?: string; contentTabIndex?: number; disablePagination?: boolean;