如何隐藏具有嵌套选项卡组的mat- tab -header，隐藏外部mat-tab-group而不隐藏内部
如何隐藏具有嵌套选项卡组的mat- tab -header，隐藏外部mat-tab-group而不隐藏内部
提问于 2018-08-18 05:10:17
我本质上有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元素，而不影响内部选项卡头？
回答 3
Stack Overflow用户
发布于 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;
}
}Stack Overflow用户
发布于 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>Stack Overflow用户
发布于 2021-10-28 20:42:25
简单的替代解决方案：
将以下内容添加到组件css文件中：
::ng-deep .mat-tab-header {
display: none!important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51902921
复制相关文章
相似问题