Как реализовать вкладки углового материала с боковыми кнопками вместо заголовка вкладки?

Вот что у меня есть - Вкладки с заголовком

И вот что я хочу - Вкладки с боковыми кнопками

Это мой код -

.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. Любой другой способ, который дал бы мне желаемый результат!

Я уверен, что правильный ответ поможет многим людям. Благодарю вас.


person Abhinav    schedule 13.08.2020    source источник


Ответы (1)


Это, конечно, странный способ создания слайд-шоу с использованием вкладок материалов, но это возможно.

Как скрыть заголовок вкладки? (когда я устанавливаю display:none, тело вкладки также исчезает)

Просто добавьте display:none в .mat-tab-label-container — работает отлично.

Как добавить боковые кнопки внутри группы mat-tab-group? (потому что, когда вы делаете это обычно, кнопки не отображаются)

Вы не можете, он просто не предназначен для проецирования случайного контента внутри, посмотрите на шаблон https://github.com/angular/components/blob/master/src/material/tabs/tab-group.html. нет пользовательской HTML-проекции, кроме содержимого вкладки - просто оставьте кнопки там, где они есть.

person itspers    schedule 13.08.2020