Vertical Tabs with Angular Material

Vertical tabs with Angular Material

Wrote angular-vertical-tabs. This simply wraps @angular/material's mat-selection-list, and uses @angular/flex-layout to reorient for different screens sizes.

Usage

<vertical-tabs>
  <vertical-tab tabTitle="Tab 0">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris tincidunt mattis neque lacinia dignissim.
    Morbi ex orci, bibendum et varius vel, porttitor et magna.
  </vertical-tab>

  <vertical-tab tabTitle="Tab b">
    Curabitur efficitur eleifend nulla, eget porta diam sodales in.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Maecenas vestibulum libero lacus, et porta ex tincidunt quis.
  </vertical-tab>

  <vertical-tab tabTitle="Tab 2">
    Sed dictum, diam et vehicula sollicitudin, eros orci viverra diam, et pretium
    risus nisl eget ex. Integer lacinia commodo ipsum, sit amet consectetur magna
    hendrerit eu.
  </vertical-tab>
</vertical-tabs>

Output

Full width

Smaller screen

two tabs vertical & horizontal - Not working Mat tabs

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

add tab button in vertical tab listing in angular material

<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">

<mat-tab disabled>
                <ng-template mat-tab-label>
                    <button mat-icon-button (click)="addTab()">
                        <mat-icon>add_circle</mat-icon>
                    </button>
                </ng-template>
          </mat-tab>

  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group> 

use this before or after your ng-for

---

Related Topics