如何使用侧按钮而不是选项卡标题实现角度材质选项卡？答案

【问题标题】：How to implement angular material tabs with side buttons instead of tab header?如何使用侧按钮而不是选项卡标题实现角度材质选项卡？
【发布时间】：2020-08-13 18:54:33
【问题描述】：

这就是我所拥有的 - Tabs with header

这就是我想要的 - Tabs with side buttons

这是我的代码 -

.html -

<div class="container">
  <button (click)="onPrev()">Prev</button>

  <mat-tab-group [(selectedIndex)]="tabSelect">

    <mat-tab label="First">
      <mat-grid-list cols="3" gutterSize="16px">
        <mat-grid-tile *ngFor="let x of [1,2,3]" class="mat-elevation-z2">
          {{x}}
        </mat-grid-tile>
      </mat-grid-list>
    </mat-tab>

    <mat-tab label="Second">
      <mat-grid-list cols="3" gutterSize="16px">
        <mat-grid-tile *ngFor="let x of [4,5,6]" class="mat-elevation-z2">
          {{x}}
        </mat-grid-tile>
      </mat-grid-list>
    </mat-tab>

  </mat-tab-group>

  <button (click)="onNext()">Next</button>
</div>

.ts -

export class AppComponent {
  tabSelect = 0;
  onPrev() {
    this.tabSelect = 0;
  }
  onNext() {
    this.tabSelect = 1;
  }
}

查询 -

如何隐藏标签页眉？（当我设置 display:none 时，tab body 也会消失）
如何添加侧边按钮inside mat-tab-group？（因为正常操作时，按钮不显示）
任何其他可以给我想要的结果的方式！

我相信正确的答案会帮助很多人。谢谢。

【问题讨论】：

标签： angular angular-material tabs pagerslidingtabstrip mat-tab

【解决方案1】：

使用Material Tabs制作幻灯片当然是一种奇怪的方式，但有可能。

如何隐藏标签页眉？（当我设置 display:none 时，tab body 也会消失）

只需将 display:none 添加到 .mat-tab-label-container - 工作得很好。

如何在 mat-tab-group 中添加侧边按钮？（因为正常操作时，按钮不显示）

你不能，它只是不是为了在里面投射随机内容而设计的，看看模板https://github.com/angular/components/blob/master/src/material/tabs/tab-group.html 除了标签内容之外没有自定义 html 投射 - 把你的按钮留在原处。

【讨论】：