Angular Components - Tabs

Angular Material tabs将内容组织成单独的视图，每次只能看到一个视图。每个tab的标签显示在选项卡标题中，active tab的标签用动画墨水条指定。当tab标签列表超过标题的宽度时，分页控件允许用户在标签上向左和向右滚动。

基本用法

<mat-tab-group>
    <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>

指令

matTabContent

自定义tab内容，要装饰在ng-template中

<mat-tab-group>
    <mat-tab label="First">
        <ng-template matTabContent>
            <tab #ramNewLog [tabIndex]="tabIndex"></tab>
        </ng-template>
    </mat-tab>
    <mat-tab label="second">
         <ng-template matTabContent>
             <tab #flashNewLog [tabIndex]="tabIndex"></tab>
         </ng-template>
    </mat-tab>
</mat-tab-group>

matTabGroup

选择器：<mat-tab-group>
Output
selectedTabChange: tab发生更改时发出的。
Input
selectedIndex: 选中tab的索引。
mat-stretch-tabs: 是否应该拉伸tabs以填充标题。

disableRipple: 是否禁用选项卡组中的涟漪。

fitInkBarToContent: 墨条的宽度是否应适合标签内容的大小。

dynamicHeight: 默认情况下，tabs-group不会将其内容高度更改为当前active tab的内容高度。要更改此属性，请将 DynamicHeight 输入设置为 true。tab content将根据active tab的高度变更其高度。

// action: 点击第二个tab
// html
<mat-tab-group (selectedTabChange)="tabChanged($event)" [(selectedIndex)]="tabIndex"
  disableRipple="true" mat-stretch-tabs="false" dynamicHeight>
    <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>
// ts
public tabIndex = 0; // default tab

public onTabChanged($event): void {
    console.log($event.index); // 1
    console.log($event.tab.textLabel); // Second
    console.log(this.tabIndex); // 1
}

matTab

选择器：<mat-tab>
Input
label: 选项卡的纯文本标签，在没有模板标签时使用。
aria-label: 为tab提供一个可读的名称

使用场景: 你想按字符串区分每个tab而不是index

// action: 点击第二个tab
// html
<mat-tab-group (selectedTabChange)="tabChanged($event)">
    <mat-tab label="First" [aria-label]="'label1'"> Content 1 </mat-tab>
    <mat-tab label="Second" [aria-label]="'label2'"> Content 2 </mat-tab>
    <mat-tab label="Third" [aria-label]="'label3'"> Content 3 </mat-tab>
</mat-tab-group>
// ts

public onTabChanged($event): void {
    console.log($event.tab.ariaLabel); // label2
}