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

以百分比形式设置min-width样式，如下所示

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

享受..

使用带有Tab Nav Bar的md-stretch-tabs

3 个答案: