使标签标签在材料设计中拉伸至全宽，以实现角度

Question

我想获得延伸到其父div的全宽度的标签。有谁知道怎么做？

<div class="tabs-header">
    <mat-tab-group>
        <mat-tab label="Signup">Content 1</mat-tab>
        <mat-tab label="Login">Content 2</mat-tab>
    </mat-tab-group>
</div>

截至目前，它看起来像这样：

我做了一些研究，看起来曾经有过类似<md-stretch-tabs>这样的方法，但这似乎不是一个功能，也没有相关的文档。

Answer 1

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

   <mat-tab-group mat-stretch-tabs>
        <mat-tab label="Signup">Content 1</mat-tab>
        <mat-tab label="Login">Content 2</mat-tab>
    </mat-tab-group>

Answer 2

经过大量研究后我找到了答案：标签可以使用css类mat-tab-label进行定位，但是，由于它们是叠加组件，因此无法在组件本身中设置样式，并且样式需要在全局上样式表如下所述： https://material.angular.io/guide/customizing-component-styles 那里还有其他解决方案。我实际使用的CSS：

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

Answer 3

可以在组件级别或全局应用的一个简单解决方案是添加以下 CSS：

ERROR:  cannot cast type date to date[]
LINE 3:   '2021-12-31', '1 day'::interval) i)::date[] )
                                             ^

或者，如果您使用的是顺风：

.mat-tab-labels {
     justify-content: space-around;
     display: flex;
}

Answer 4

不得不为我的应用使用 ng deep：

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

Answer 5

它仅对绝对像素大小对我有用

.mat-tab-label {
  width: 300px;
}

而不是百分比

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

使用Angular / Material 7.1.0 +