两个垂直和水平选项卡 - 不工作的垫子选项卡

Question

我能够使用以下代码创建垂直材料选项卡，但我想在垂直选项卡中，我需要水平选项卡

当我尝试使用以下代码时，两者都显示在垂直选项卡中，这是我的代码，这是我的 Stackblitz 网址。

<div class="container">
<div id="content">
<div id="main-content">
<mat-tab-group>
<mat-tab label="Tab One">
Tab One Content
</mat-tab>
<mat-tab label="Tab Two">
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>

这是堆栈闪电战链接

Answer 1

您可以通过嵌套mat-tab-group来实现这一点，根据方向指定垂直和水平类并相应地调整css：

.HTML

<mat-tab-group class="vertical">
<mat-tab label="Tab One">
<mat-tab-group class="horizontal">
<mat-tab label="Sub Tab One">
Sub Tab One Content
</mat-tab>
<mat-tab label="Sub Tab Two">
Sub Tab Two Content
</mat-tab>
</mat-tab-group>
</mat-tab>
<mat-tab label="Tab Two">
Tab Two Content
</mat-tab>
</mat-tab-group>

.CSS

:host {
/deep/ {
.mat-tab-group.vertical {
flex-direction: row;
}
.mat-tab-group.horizontal {
flex-direction: column;
}
.vertical .mat-tab-labels {
flex-direction: column;
}
.horizontal .mat-tab-labels {
flex-direction: row;
}
}
}

在这里工作堆栈闪电战