Вот что у меня есть - Вкладки с заголовком
И вот что я хочу - Вкладки с боковыми кнопками
Это мой код -
.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, тело вкладки также исчезает)
- Как добавить боковые кнопки внутри группы mat-tab-group? (потому что, когда вы делаете это обычно, кнопки не отображаются)
- Любой другой способ, который дал бы мне желаемый результат!
Я уверен, что правильный ответ поможет многим людям. Благодарю вас.