如何使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>

以下是上面的输出结果：

选项卡没有使用完整宽度。标签图标和文本未对齐。

我应该怎么做？

- Sunil Garg

Answer 1

只需在<mat-tab-group>中使用mat-stretch-tabs即可获得等宽。 例如-

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

- Darshan Devrai

Answer 2

对于对齐问题：我只是在 md-icon 中使用了 vertical-align: middle; 并将 div 更改为 span。看起来可行。

<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>

- Rohit Luthra

Answer 3

您可以使用以下 CSS 将它们平均分散。

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

演示

- Nehal

---

如何对齐图标和文本？ - Sunil Garg

什么的颜色？ - Sunil Garg

我已经定义了width:50%。现在如果我添加更多的选项卡，每个选项卡的大小会平均分配？为什么会这样？ - Sunil Garg

我误读了你的评论，很抱歉关于“颜色”的问题。我还检查了多个选项卡，一旦设置为50％，它们会自动调整大小以实现均匀分布的宽度。 Plunker现在无法使用，所以无法修复图标文本对齐。一旦我有可行的解决方案，我会更新答案。 - Nehal

只需在 md-tab-group 上使用 md-stretch-tabs 属性即可。 - Edric