[英]How to hide mat-tab-header with nested tab groups, hide for outer mat-tab-group without hiding for inner
I have html essentially我基本上有 html
<mat-tab-group>
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
How can I use css (or any method really) to hide the outer tabs groups mat-tab-header element, but not affect the inner tab header?如何使用 css(或任何真正的方法)隐藏外部选项卡组 mat-tab-header 元素,但不影响内部选项卡标题?
Figured it out, just had to select direct child想通了,只需要选择直接孩子
<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;
}
}
I highly recommend you to use this custom directive instead of using css.我强烈建议您使用此自定义指令而不是使用 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";
}
}
It's very simple and reusable.它非常简单且可重复使用。 usage example:
用法示例:
<mat-tab-group header-less-tabs>
<mat-tab>
<mat-tab-group>
<mat-tab>
</mat-tab>
</mat-tab-group>
</mat-tab>
</mat-tab-group>
SIMPLE ALTERNATIVE SOLUTION:简单的替代解决方案:
Add the following to your component css file:将以下内容添加到您的组件 css 文件中:
::ng-deep .mat-tab-header {
display: none!important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.