docs(material/tabs): add dynamically aligned tabs group example

adds an example for dynamically aligned tabs group

closes #29029

Author: naaajii

src/components-examples/material/tabs/tab-group-align/tab-group-align-example.css

@@ -1,3 +1,5 @@
-.mat-tab-group {
-  margin-bottom: 48px;
+.example-action-button {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-right: 8px;
 }

src/components-examples/material/tabs/tab-group-align/tab-group-align-example.html

@@ -1,19 +1,19 @@
-<!-- #docregion align-start -->
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
-<!-- #enddocregion align-start -->
-  <mat-tab label="First">Content 1</mat-tab>
-  <mat-tab label="Second">Content 2</mat-tab>
-  <mat-tab label="Third">Content 3</mat-tab>
-</mat-tab-group>
+<button mat-raised-button class="example-action-button" (click)="alignment = 'start'">
+  Start
+</button>
 
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="center">
-  <mat-tab label="First">Content 1</mat-tab>
-  <mat-tab label="Second">Content 2</mat-tab>
-  <mat-tab label="Third">Content 3</mat-tab>
-</mat-tab-group>
+<button mat-raised-button class="example-action-button" (click)="alignment = 'center'">
+  Center
+</button>
 
-<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="end">
+<button mat-raised-button class="example-action-button" (click)="alignment = 'end'">
+  End
+</button>
+
+<!-- #docregion align-start -->
+<mat-tab-group mat-stretch-tabs="false" [mat-align-tabs]="alignment">
   <mat-tab label="First">Content 1</mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>
+<!-- #docregion align-end -->

src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatTabsModule} from '@angular/material/tabs';
 
 /**
@@ -9,6 +10,8 @@ import {MatTabsModule} from '@angular/material/tabs';
   templateUrl: 'tab-group-align-example.html',
   styleUrl: 'tab-group-align-example.css',
   standalone: true,
-  imports: [MatTabsModule],
+  imports: [MatTabsModule, MatButtonModule],
 })
-export class TabGroupAlignExample {}
+export class TabGroupAlignExample {
+  alignment: 'start' | 'center' | 'end' = 'start';
+}

src/dev-app/tabs/tabs-demo.html

@@ -25,4 +25,4 @@ <h3>Inverted Tabs</h3>
 <h3>Ink bar fit to content</h3>
 <tab-group-ink-bar-example></tab-group-ink-bar-example>
 <h3>Tab group with the headers on the bottom</h3>
-<tab-group-header-below-example></tab-group-header-below-example>
+<tab-group-header-below-example></tab-group-header-below-example>

src/material/tabs/tabs.md

@@ -70,7 +70,7 @@ 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.
+do so using the `mat-align-tabs` input or attribute.
 
  <!-- example({"example": "tab-group-align",
                "file": "tab-group-align-example.html",