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

【问题标题】：Angular Material 2 - Display mat-tab-label text in two lines (like title an subtitle)Angular Material 2 - 在两行中显示 mat-tab-label 文本（如标题和副标题）
【发布时间】：2019-01-20 05:42:12
【问题描述】：

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

是否可以让 mat-label 中的文本像这个截图一样显示？

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

【问题讨论】：

请描述您想要实现的外观，因为有些人可能无法访问链接的图像。
最近的是mat-card-header的外观，可以设置标题和副标题。我想为 mat-tab-label（标题和副标题）做同样的事情
修改你原来的帖子——具体一点，比如“标题在副标题之上”——不要只提到你知道但其他人可能不知道的东西。

标签： angular-material mat-tab

【解决方案1】：

只有 HTML，Angular Material 使用 inline-flex 格式化它们并将它们放在一行中。您需要使用::ng-deep 组合器来更改阴影树内组件的样式。 Here's 有一篇小文章可以阅读，更多内容请谷歌。

还有here is your stackblitz 的答案。其中，将您的类添加到其中并调整样式表，这样您就不会操作所有选项卡，除非您想要这样做。

【讨论】：

非常感谢。它工作正常。 My stackblitz 也已修复。

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

【讨论】：