我本质上有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元素,而不影响内部选项卡头?
发布于 2018-08-18 06:28:10
想明白了,只需要选择直接子
<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;
}
}
发布于 2020-12-30 18:28:10
我强烈建议您使用这个自定义指令,而不是使用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>
发布于 2021-10-28 20:42:25
简单的替代解决方案:
将以下内容添加到组件css文件中:
::ng-deep .mat-tab-header {
display: none!important;
}
https://stackoverflow.com/questions/51902921
复制相似问题