带有双标签的Angular 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>