I was able to create vertical material tab with my below code but I want is inside vertical tab i need an horizontal tab
When I tried using below code both showing in vertical tabs Here is my code and here is my Stackblitz url.
<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>
Here is the stackblitz link
You may achieve that by nesting mat-tab-group
's, specifying classes for vertical and horizontal depending on the orientation and adjusting css accordingly:
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;
}
}
}
Working stackblitz here