[英]Angular Material Tabs with Fixed Tab Header and Fixed Div In Content
[英]How to implement angular material tabs with side buttons instead of tab header?
这是我所拥有的 -带有 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;
}
}
查询 -
我相信正确的答案会帮助很多人。 谢谢你。
使用材质选项卡制作幻灯片当然是一种奇怪的方式,但可能。
如何隐藏选项卡 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除选项卡内容外的投影 - 只需将按钮留在原处即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.