angular-material - Angular Material 2 - 在两行中显示 mat-tab-label 文本（如标题和副标题）

Question

我想在 mat-tab-label 中显示文本，例如一些标题及其副标题。例如，在mat-card-header中，标题和副标题可以设置并显示在另一个之下。

是否可以像此屏幕截图一样显示 mat-label 中的文本？

这是我尝试过的stackbliz，但没有任何效果 - 所有标签总是内联显示。

Answer 1

没有任何东西只有 HTML，Angular Material 使用它们来格式化它们inline-flex并将它们放在一行上。您需要使用::ng-deep组合器来更改阴影树内组件的样式。这里有一篇小文章可供阅读，谷歌了解更多。

这是你的堆栈闪电战的答案。其中，将您的类添加到其中并调整样式表，这样您就不会操纵所有选项卡，除非您想要这样做。

Answer 2

在较新版本的 Angular Material（在 9.2.0 上测试）中，您可以使用ng-template mat-tab-label纯 HTML 添加新行：

<mat-tab>
    <ng-template mat-tab-label>
        38<br />
        description
    </ng-template>
    Content inside the tab
</mat-tab>

如果你需要设置标签的样式，你可以简单地使用 CSS 类：

.mat-tab-labels {
    .mat-tab-label {
        border: 1px solid #fff;
        background-color: #bebdbd;
        &.mat-tab-label-active {
            background-color: #27817a;
        }
    }
}