如何使两个标签在角度材料2中占据整个屏幕宽度

Question

我正在使用角度材质2并且只有两个标签，并希望它们占据整个屏幕宽度（每个一半，见图2）。我怎么能这样做（默认情况下它看起来像pic1）？

pic1
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------

pic 2
------------------------------------------------
|         ITEM1        |          ITEM 2       |
------------------------------------------------

Answer 1

我认为您正在寻找的是[mat-stretch-tabs]属性：

<mat-tab-group mat-stretch-tabs>
    <mat-tab label="Tab 1">Tab 1</mat-tab>
    <mat-tab label="Tab 2">Tab 2</mat-tab>
</mat-tab-group>

注意：出于某种原因，它仅适用于mat-tab-group组件，但不适用于nav[mat-tab-nav-bar]。

Answer 2

可以使用CSS类mat-tab-label定位标签。

尝试以下CSS：

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

此外，您可以使用mat-stretch-tabs属性：

<mat-tab-group mat-stretch-tabs>
    <mat-tab label="ITEM 1">ITEM1</mat-tab>
    <mat-tab label="ITEM 2">ITEM2</mat-tab>
</mat-tab-group>