Угловые 2 материала вкладки с двойной меткой?

Question

Можно ли сделать двойную метку для вкладок материала? Я сделал пользовательский ярлык, подобный этому:

<ng-template mat-tab-label>
                <div>{{mainTab.label}}</div>
                <div>{{mainTab.label}}</div>
            </ng-template>

Но эти два div'а продолжают накладываться друг на друга, есть ли способ сделать их каждого на новой строке?

Answer 1

Расположение элементов в ярлыке вкладки контролируется родительским контейнером через класс mat-tab-label-container. Это макет flexbox. Вы можете либо переопределить это, либо, что, вероятно, намного проще, просто обернуть все в один DIV:

<ng-template mat-tab-label>
    <div>
        <div>{{mainTab.label}}</div>
        <div>{{mainTab.label}}</div>
    </div>
</ng-template>

Или, если вам нужен простой многострочный дисплей, вы можете использовать BR:

<ng-template mat-tab-label>
    <div>{{mainTab.label}}<br>{{mainTab.label}}</div>
</ng-template>