diff --git a/src/lib/tabs/tab-header.scss b/src/lib/tabs/tab-header.scss index 7cb991a472c5..3ecf4231fc6d 100644 --- a/src/lib/tabs/tab-header.scss +++ b/src/lib/tabs/tab-header.scss @@ -82,4 +82,12 @@ .mat-tab-labels { display: flex; + + [mat-align-tabs='center'] & { + justify-content: center; + } + + [mat-align-tabs='end'] & { + justify-content: flex-end; + } } diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md index 0685355dfce4..930b15738232 100644 --- a/src/lib/tabs/tabs.md +++ b/src/lib/tabs/tabs.md @@ -83,7 +83,7 @@ the `active` property to determine which tab is currently active. The correspond ### Lazy Loading By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM -until the tab is activated. +until the tab is activated. If the tab contains several complex child components or the tab's contents @@ -108,6 +108,12 @@ with the `matTabContent` attribute. ``` +### Label alignment +If you want to align the tab labels in the center or towards the end of the container, you can +do so using the `[mat-align-tabs]` attribute. + + + ### Accessibility Tabs without text or labels should be given a meaningful label via `aria-label` or `aria-labelledby`. For `MatTabNav`, the `