如何隐藏带有嵌套选项卡组的mat-tab-header,如何隐藏外部的mat-tab-group,而不隐藏内部的

时间:2018-08-17 21:10:17

标签: css angular sass angular-material

我基本上是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元素,但不影响内部标签页眉?

2 个答案:

答案 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;
  }
}