我基本上是html
<mat-tab-group>
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
如何使用CSS(或其他任何方法)隐藏外部标签组的mat-tab-header元素,但不影响内部标签页眉?
答案 0 :(得分:3)
我强烈建议您使用此自定义指令而不是使用 css。
import { Directive, ElementRef, OnInit } from "@angular/core";
@Directive({
selector: "[header-less-tabs]",
})
export class HeaderLessTabsDirective implements OnInit {
constructor(private eleRef: ElementRef) {}
ngOnInit(): void {
this.eleRef.nativeElement.children[0].style.display = "none";
}
}
它非常简单且可重复使用。 用法示例:
<mat-tab-group header-less-tabs>
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
答案 1 :(得分:0)
弄清楚了,只需要选择直子即可
<mat-tab-group class="invisible-tabs">
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
.invisible-tabs {
> .mat-tab-header {
display: none;
}
}