【问题标题】:How to hide mat-tab-header with nested tab groups, hide for outer mat-tab-group without hiding for inner如何隐藏带有嵌套选项卡组的 mat-tab-header,隐藏外部 mat-tab-group 而不隐藏内部
【发布时间】:2019-01-24 22:35:05
【问题描述】:

我基本上有 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 元素,但不影响内部选项卡标题?

【问题讨论】:

    标签: css angular sass angular-material


    【解决方案1】:

    简单的替代解决方案:

    将以下内容添加到您的组件 css 文件中:

    ::ng-deep .mat-tab-header {
    display: none!important;
    }
    

    【讨论】:

      【解决方案2】:

      我强烈建议您使用这个自定义指令而不是使用 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>
      

      【讨论】:

      • 除了可重用性之外,您能解释一下为什么建议使用指令而不是css吗?
      • 其他方法之一是使用 ng-deep 或将视图封装设置为无。但它也会影响其他选项卡,并且指令不会有这个问题。除此之外,可重用性对我来说是一个重要因素
      【解决方案3】:

      想通了,只需要选择直接孩子

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-11-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-04-07
        • 2010-10-18
        相关资源
        最近更新 更多