Skip to content

Commit 894cff5

Browse files
naaajiinaaajii
committed
main - ff3d342 feat(material/tabs): add alignTabs in MatTabsConfig (#29779)
1 parent badc5a0 commit 894cff5

File tree

6 files changed

+53
-26
lines changed

6 files changed

+53
-26
lines changed

‎docs-content/api-docs/material-tabs.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -483,6 +483,20 @@ <h4 id="MatTabGroup" class="docs-header-link docs-api-h4 docs-api-class-name">
483483

484484

485485

486+
<tr class="docs-api-properties-row">
487+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ alias: &#39;mat-align-tabs&#39; }</span>)
488+
</div><p class="docs-api-property-name">
489+
<code>alignTabs: string | null</code>
490+
</p>
491+
</td>
492+
<td class="docs-api-property-description"><p>Alignment for tabs label.</p>
493+
</td>
494+
</tr>
495+
496+
497+
498+
499+
486500
<tr class="docs-api-properties-row">
487501
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
488502
@Input()</div><p class="docs-api-property-name">
@@ -1379,6 +1393,19 @@ <h4 id="MatTabsConfig" class="docs-header-link docs-api-h4 docs-api-interface-na
13791393

13801394

13811395

1396+
<tr class="docs-api-properties-row">
1397+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
1398+
<code>alignTabs: &#39;start&#39; | &#39;center&#39; | &#39;end&#39;</code>
1399+
</p>
1400+
</td>
1401+
<td class="docs-api-property-description"><p>Alignment for the tabs label.</p>
1402+
</td>
1403+
</tr>
1404+
1405+
1406+
1407+
1408+
13821409
<tr class="docs-api-properties-row">
13831410
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
13841411
<code>animationDuration: string</code>

‎fesm2022/cdk/drag-drop.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,7 @@ class CdkDragDropTabsExample {
477477
this.selectedTabIndex = this.tabs.indexOf(prevActive);
478478
}
479479
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkDragDropTabsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
480-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkDragDropTabsExample, isStandalone: true, selector: "cdk-drag-drop-tabs-example", ngImport: i0, template: "<mat-tab-group\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n cdkDropListElementContainer=\".mat-mdc-tab-labels\"\n class=\"example-drag-tabs\"\n [(selectedIndex)]=\"selectedTabIndex\"\n animationDuration=\"0\">\n @for (tab of tabs; track $index) {\n <mat-tab>\n <ng-template mat-tab-label>\n <span\n cdkDrag\n cdkDragPreviewClass=\"example-drag-tabs-preview\"\n cdkDragRootElement=\".mat-mdc-tab\">{{tab}}</span>\n </ng-template>\n\n <h3>Content for {{tab}}</h3>\n\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus\n reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente\n voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto\n nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo\n labore sapiente cum alias nobis!\n </mat-tab>\n }\n</mat-tab-group>\n", styles: [".example-drag-tabs.cdk-drop-list-dragging {\n pointer-events: none;\n}\n\n.example-drag-tabs-preview.cdk-drag-animating {\n transition: all 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mat-mdc-tab.example-drag-tabs-preview {\n outline: dashed 1px #ccc;\n outline-offset: 4px;\n}\n\n.example-drag-tabs .cdk-drag-placeholder {\n opacity: 0.5;\n}\n\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }], encapsulation: i0.ViewEncapsulation.None }); }
480+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkDragDropTabsExample, isStandalone: true, selector: "cdk-drag-drop-tabs-example", ngImport: i0, template: "<mat-tab-group\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n cdkDropListElementContainer=\".mat-mdc-tab-labels\"\n class=\"example-drag-tabs\"\n [(selectedIndex)]=\"selectedTabIndex\"\n animationDuration=\"0\">\n @for (tab of tabs; track $index) {\n <mat-tab>\n <ng-template mat-tab-label>\n <span\n cdkDrag\n cdkDragPreviewClass=\"example-drag-tabs-preview\"\n cdkDragRootElement=\".mat-mdc-tab\">{{tab}}</span>\n </ng-template>\n\n <h3>Content for {{tab}}</h3>\n\n Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem perspiciatis in delectus\n reprehenderit, molestias ullam nostrum odit, modi consequatur harum beatae? Sapiente\n voluptatibus illo natus assumenda hic quasi dolor et laborum veniam! Molestiae architecto\n nesciunt est quo nisi? Nostrum repellendus quibusdam laudantium? Optio architecto explicabo\n labore sapiente cum alias nobis!\n </mat-tab>\n }\n</mat-tab-group>\n", styles: [".example-drag-tabs.cdk-drop-list-dragging {\n pointer-events: none;\n}\n\n.example-drag-tabs-preview.cdk-drag-animating {\n transition: all 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mat-mdc-tab.example-drag-tabs-preview {\n outline: dashed 1px #ccc;\n outline-offset: 4px;\n}\n\n.example-drag-tabs .cdk-drag-placeholder {\n opacity: 0.5;\n}\n\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i1$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }], encapsulation: i0.ViewEncapsulation.None }); }
481481
}
482482
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkDragDropTabsExample, decorators: [{
483483
type: Component,

‎fesm2022/cdk/drag-drop.mjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)