如何使用側按鈕而不是選項卡 header 實現 angular 材料選項卡？

Question

這是我所擁有的 -帶有 header 的標簽

這就是我想要的 -帶有側邊按鈕的標簽

這是我的代碼 -

.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. 如何隱藏選項卡 Header？ （當我設置 display:none 時，標簽正文也消失了）
2. 如何在mat-tab-group 中添加側邊按鈕？ （因為當你正常操作時，按鈕不顯示）
3. 任何其他方式可以給我想要的結果！

我相信正確的答案會幫助很多人。 謝謝你。

Answer 1

使用材質選項卡制作幻燈片當然是一種奇怪的方式，但可能。

如何隱藏選項卡 Header？ （當我設置 display:none 時，標簽正文也消失了）

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

如何在 mat-tab-group 中添加側邊按鈕？ （因為當你正常操作時，按鈕不顯示）

你不能，它只是不是為了在里面投射隨機內容，看看模板https://github.com/angular/components/blob/master/src/material/tabs/tab-group.html沒有自定義 ZFC335EDC70D22C69A25除選項卡內容外的投影 - 只需將按鈕留在原處即可。