如何使用侧面按钮而不是标签标题实现有角度的材料标签？

问题描述

这就是我所拥有的-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;
  }
}

查询-

1. 如何隐藏标签页眉？ （当我设置display：none时，标签页主体也会消失）
2. 如何在内部 mat-tab-group中添加侧面按钮？ （因为当您正常进行操作时，按钮不会显示）
3. 其他任何可以给我期望结果的方式！

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

解决方法

这当然是使用“材质选项卡”制作幻灯片的奇怪方法，但是可以。

如何隐藏标签页眉？ （当我设置display：none时，标签页主体也会消失）

只需在.mat-tab-label-container中添加display：none-即可正常工作。

如何在mat-tab-group中添加侧面按钮？ （因为当您正常进行操作时，按钮不会显示）

您不能这样做，只是设计目的不是在其中投影随机内容，而是查看模板https://github.com/angular/components/blob/master/src/material/tabs/tab-group.html，除了制表符内容之外没有自定义html投影-只需将按钮留在原处即可。