如何使两个选项卡在角材料2中占据整个屏幕宽度答案

【问题标题】：How to make two tabs take whole screen width in angular material 2如何使两个选项卡在角材料2中占据整个屏幕宽度
【发布时间】：2019-09-11 15:31:32
【问题描述】：

我正在使用 angular material 2 并且只有两个选项卡并希望它们占据整个屏幕宽度（每个一半，参见 pic2）。我该怎么做（默认情况下它看起来像 pic1）？

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

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

【问题讨论】：

Angular Material 使用了 Flex，但它没有集成到他们的 github 中，所以你必须从 flex-layout 安装它。否则你可以使用grid-list，或者引导程序的列方法
可以提供sn-p吗？

标签： html angular css angular-material2

【解决方案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]。

【讨论】：

这应该在 API 中
@emvidi 它实际上是一个 CSS 类，但我仍然同意你的观点。
@Edric CSS 属性有单独的文档吗？
@garg10may AFAIK，这些属性没有文档。不过，它可能在选项卡组件的文档中指定。
@Edric 不，它不在材料文档中，因为我想了解的是，你是如何知道有一种叫做“mat-stretch-tabs”的东西

【解决方案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>

【讨论】：