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 组合符来更改影子树内部组件的样式。 Here's 一篇要阅读的小文章，google 了解更多。

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

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;
        }
    }
}

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

Angular Material 2 - Display mat-tab-label text in two lines (like title an subtitle)

angular-material

mat-tab