Search code examples
angularangular-material2

Using md-stretch-tabs with Tab Nav Bar

I need to stretch the tabs to fill up the width of the page. How should I use md-stretch-tabs in the bottom mention code? Please advice. Thank you

  <nav md-tab-nav-bar aria-label="weather navigation links">
    <a md-tab-link
       *ngFor="let tabLink of tabLinks; let i = index"
       [routerLink]="tabLink.link"
       [active]="activeLinkIndex === i"
       (click)="activeLinkIndex = i">
      {{tabLink.label}}
    </a>
  </nav>
  <router-outlet></router-outlet>
Solution

  • If you're using SCSS or SASS you can use the following:

    .mat-tab-links {
    display: table;
    width: 100%;

    .mat-tab-link {
        display: table-cell;
    }
}