Skip to content

Commit

Permalink
feat(material/tabs): label & body classes
Browse files Browse the repository at this point in the history 
closes angular#23685, angular#9290, angular#15997
  • Loading branch information
@lekhmanrus
lekhmanrus committed Oct 5, 2021
1 parent 7c16258 commit 3229062
Show file tree
Hide file tree
Showing 6 changed files with 251 additions and 52 deletions.
28 changes: 15 additions & 13 deletions src/material-experimental/mdc-tabs/tab-group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
[attr.aria-label]="tab.ariaLabel || null"
[attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
[class.mdc-tab--active]="selectedIndex == i"
[ngClass]="tab.labelClassList"
[disabled]="tab.disabled"
[fitInkBarToContent]="fitInkBarToContent"
(click)="_handleClick(tab, tabHeader, i)"
Expand All @@ -36,12 +37,12 @@
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">
<!-- If there is a label template, use it. -->
<ng-template [ngIf]="tab.templateLabel">
<ng-template [ngIf]="tab.templateLabel" [ngIfElse]="tabTextLabel">
<ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
</ng-template>

<!-- If there is not a label template, fall back to the text label. -->
<ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
<ng-template #tabTextLabel>{{tab.textLabel}}</ng-template>
</span>
</span>
</div>
Expand All @@ -52,16 +53,17 @@
[class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
#tabBodyWrapper>
<mat-tab-body role="tabpanel"
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabContentId(i)"
[attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
[attr.aria-labelledby]="_getTabLabelId(i)"
[class.mat-mdc-tab-body-active]="selectedIndex === i"
[content]="tab.content!"
[position]="tab.position!"
[origin]="tab.origin"
[animationDuration]="animationDuration"
(_onCentered)="_removeTabBodyWrapperHeight()"
(_onCentering)="_setTabBodyWrapperHeight($event)">
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabContentId(i)"
[attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
[attr.aria-labelledby]="_getTabLabelId(i)"
[class.mat-mdc-tab-body-active]="selectedIndex === i"
[ngClass]="tab.bodyClassList"
[content]="tab.content!"
[position]="tab.position!"
[origin]="tab.origin"
[animationDuration]="animationDuration"
(_onCentered)="_removeTabBodyWrapperHeight()"
(_onCentering)="_setTabBodyWrapperHeight($event)">
</mat-tab-body>
</div>
50 changes: 39 additions & 11 deletions src/material-experimental/mdc-tabs/tab-group.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ describe('MDC-based MatTabGroup', () => {
TabGroupWithIndirectDescendantTabs,
TabGroupWithSpaceAbove,
NestedTabGroupWithLabel,
TabsWithClassesTestApp,
],
});

Expand Down Expand Up @@ -364,7 +365,6 @@ describe('MDC-based MatTabGroup', () => {

expect(contentElements.map(e => e.getAttribute('tabindex'))).toEqual(['1', null, null]);
});

});

describe('aria labelling', () => {
Expand Down Expand Up @@ -409,6 +409,7 @@ describe('MDC-based MatTabGroup', () => {

describe('disable tabs', () => {
let fixture: ComponentFixture<DisabledTabsTestApp>;

beforeEach(() => {
fixture = TestBed.createComponent(DisabledTabsTestApp);
});
Expand Down Expand Up @@ -482,7 +483,6 @@ describe('MDC-based MatTabGroup', () => {
expect(tabs[0].origin).toBeLessThan(0);
}));


it('should update selected index if the last tab removed while selected', fakeAsync(() => {
const component: MatTabGroup =
fixture.debugElement.query(By.css('mat-tab-group')).componentInstance;
Expand All @@ -500,7 +500,6 @@ describe('MDC-based MatTabGroup', () => {
expect(component.selectedIndex).toBe(numberOfTabs - 2);
}));


it('should maintain the selected tab if a new tab is added', () => {
fixture.detectChanges();
const component: MatTabGroup =
Expand All @@ -517,7 +516,6 @@ describe('MDC-based MatTabGroup', () => {
expect(component._tabs.toArray()[2].isActive).toBe(true);
});


it('should maintain the selected tab if a tab is removed', () => {
// Select the second tab.
fixture.componentInstance.selectedIndex = 1;
Expand Down Expand Up @@ -565,7 +563,6 @@ describe('MDC-based MatTabGroup', () => {

expect(fixture.componentInstance.handleSelection).not.toHaveBeenCalled();
}));

});

describe('async tabs', () => {
Expand Down Expand Up @@ -935,6 +932,7 @@ class SimpleTabsTestApp {
animationDone() { }
}


@Component({
template: `
<mat-tab-group class="tab-group"
Expand Down Expand Up @@ -965,6 +963,7 @@ class SimpleDynamicTabsTestApp {
}
}


@Component({
template: `
<mat-tab-group class="tab-group" [(selectedIndex)]="selectedIndex">
Expand All @@ -990,8 +989,8 @@ class BindedTabsTestApp {
}
}


@Component({
selector: 'test-app',
template: `
<mat-tab-group class="tab-group">
<mat-tab>
Expand All @@ -1014,6 +1013,7 @@ class DisabledTabsTestApp {
isDisabled = false;
}


@Component({
template: `
<mat-tab-group class="tab-group">
Expand Down Expand Up @@ -1059,7 +1059,6 @@ class TabGroupWithSimpleApi {


@Component({
selector: 'nested-tabs',
template: `
<mat-tab-group>
<mat-tab label="One">Tab one content</mat-tab>
Expand All @@ -1077,8 +1076,8 @@ class NestedTabs {
@ViewChildren(MatTabGroup) groups: QueryList<MatTabGroup>;
}


@Component({
selector: 'template-tabs',
template: `
<mat-tab-group>
<mat-tab label="One">
Expand All @@ -1091,11 +1090,11 @@ class NestedTabs {
</mat-tab>
</mat-tab-group>
`,
})
class TemplateTabs {}
})
class TemplateTabs {}


@Component({
@Component({
template: `
<mat-tab-group>
<mat-tab [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"></mat-tab>
Expand Down Expand Up @@ -1160,6 +1159,7 @@ class TabGroupWithInkBarFitToContent {
fitInkBarToContent = true;
}


@Component({
template: `
<div style="height: 300px; background-color: aqua">
Expand Down Expand Up @@ -1202,3 +1202,31 @@ class TabGroupWithSpaceAbove {
})
class NestedTabGroupWithLabel {
}


@Component({
template: `
<mat-tab-group class="tab-group">
<mat-tab label="Tab One">
Tab one content
</mat-tab>
<mat-tab label="Tab Two" [class]="labelClassList">
Tab two content
</mat-tab>
<mat-tab label="Tab Three" [bodyClass]="bodyClassList">
Tab three content
</mat-tab>
<mat-tab label="Tab Four" [class]="labelClassList" [bodyClass]="bodyClassList">
Tab four content
</mat-tab>
<mat-tab label="Tab Five" class="hardcoded label classes" bodyClass="hardcoded body classes">
Tab five content
</mat-tab>
</mat-tab-group>
`,
})
class TabsWithClassesTestApp {
@ViewChildren(MatTab) tabs: QueryList<MatTab>;
labelClassList?: string | string[];
bodyClassList?: string | string[];
}
31 changes: 17 additions & 14 deletions src/material/tabs/tab-group.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
[disablePagination]="disablePagination"
(indexFocused)="_focusChanged($event)"
(selectFocusedIndex)="selectedIndex = $event">
<div class="mat-tab-label mat-focus-indicator" role="tab" matTabLabelWrapper mat-ripple cdkMonitorElementFocus
<div class="mat-tab-label mat-focus-indicator" role="tab" matTabLabelWrapper mat-ripple
cdkMonitorElementFocus
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabLabelId(i)"
[attr.tabIndex]="_getTabIndex(tab, i)"
Expand All @@ -15,6 +16,7 @@
[attr.aria-label]="tab.ariaLabel || null"
[attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
[class.mat-tab-label-active]="selectedIndex == i"
[ngClass]="tab.labelClassList"
[disabled]="tab.disabled"
[matRippleDisabled]="tab.disabled || disableRipple"
(click)="_handleClick(tab, tabHeader, i)"
Expand All @@ -23,12 +25,12 @@

<div class="mat-tab-label-content">
<!-- If there is a label template, use it. -->
<ng-template [ngIf]="tab.templateLabel">
<ng-template [ngIf]="tab.templateLabel" [ngIfElse]="tabTextLabel">
<ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
</ng-template>

<!-- If there is not a label template, fall back to the text label. -->
<ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
<ng-template #tabTextLabel>{{tab.textLabel}}</ng-template>
</div>
</div>
</mat-tab-header>
Expand All @@ -38,16 +40,17 @@
[class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
#tabBodyWrapper>
<mat-tab-body role="tabpanel"
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabContentId(i)"
[attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
[attr.aria-labelledby]="_getTabLabelId(i)"
[class.mat-tab-body-active]="selectedIndex === i"
[content]="tab.content!"
[position]="tab.position!"
[origin]="tab.origin"
[animationDuration]="animationDuration"
(_onCentered)="_removeTabBodyWrapperHeight()"
(_onCentering)="_setTabBodyWrapperHeight($event)">
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabContentId(i)"
[attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
[attr.aria-labelledby]="_getTabLabelId(i)"
[class.mat-tab-body-active]="selectedIndex === i"
[ngClass]="tab.bodyClassList"
[content]="tab.content!"
[position]="tab.position!"
[origin]="tab.origin"
[animationDuration]="animationDuration"
(_onCentered)="_removeTabBodyWrapperHeight()"
(_onCentering)="_setTabBodyWrapperHeight($event)">
</mat-tab-body>
</div>
Loading

0 comments on commit 3229062

Please sign in to comment.