angularangular-materialangular8mat-tab

two tabs vertical & horizontal - Not working Mat tabs


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


Solution

  • 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