将 md-stretch-tabs 与选项卡导航栏一起使用

Question

我需要拉伸标签以填满页面的宽度。我应该如何在底部提及代码中使用 md-stretch-tabs？请指教。谢谢

  <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>

Answer 1

按如下百分比设置最小宽度样式，

this.minWidth=100/this.routeLinks.length;

<a md-tab-link [style.min-width]="minWidth + '%'" >...

LIVE DEMO

Answer 2

如果您使用的是 SCSS 或 SASS，您可以使用以下内容：

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

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

Answer 3

我正在使用 flex box，但接受的答案对我不起作用。

这是我的解决方案..

.mat-tab-link {
    display: flex;
    flex-grow: 1;
}

享受..

将 md-stretch-tabs 与选项卡导航栏一起使用

Using md-stretch-tabs with Tab Nav Bar

angular-material2

angular