Угловой материал 2 - отображение текста метки табуляции в двух строках (например, заголовок и подзаголовок)

Question

Я хотел бы отобразить текст в mat-tab-label как заголовок и субтитры. Например, как на заголовке mat-card, где заголовок и субтитры могут быть установлены и отображены один под другим.

Можно ли сделать так, чтобы текст в mat-label отображался как этот скриншот?

Вот стек, где я пробовал, но ничего не работает - все теги всегда отображаются в строке.

Answer 1

Ничего, кроме HTML, Angular Material форматирует их, используя inline-flex и помещает их в одну строку. Вам нужно использовать ::ng-deep комбинатор для изменения стиля компонентов внутри теневого дерева. Вот небольшая статья для чтения, Google для больше.

А вот и ваш стек с ответом. Разумеется, добавьте в него свои классы и настройте таблицу стилей, чтобы не манипулировать всеми вкладками, если только это не то, что вы хотите.

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