如何使material2选项卡使用整页大小

Question

我想创建包含两个标签的标签组。选项卡组应使用整页大小，单个选项卡应获得相等的宽度。以下是我正在使用的代码

<md-tab-group fxFlexFill>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>description</md-icon> Content Privileges
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>flash_on</md-icon> Application Privileges
        </ng-template>
        Application Privileges
    </md-tab>
</md-tab-group>

这是上面的输出

标签未使用全宽。标签图标和文字未对齐。

我该怎么做？

Answer 1

对齐问题：我只是在vertical-align:middle;中使用md-icon并使用span更改了div。它似乎有效。

<div>
  <md-tab-group >
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">description</md-icon> 
            <span class="title">Content Privileges</span>
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">flash_on</md-icon>
            <span class="title">Application Privileges</span>
        </ng-template>
        Application Privileges
    </md-tab>
  </md-tab-group>
</div>

Answer 2

只需将mat-stretch-tabs与<mat-tab-group>一起使用即可获得相同的宽度。 e.g -

<mat-tab-group mat-stretch-tabs>
  <mat-tab>
   ...
  </mat-tab>
  <mat-tab>
    ...
  </mat-tab >
</mat-tab-group>

Answer 3

您可以使用以下css均匀地传播它们。

/deep/ .mat-tab-label {
    width: 50%;
}

demo