滚动时,md-tab-group内的md-tabs不会保持固定状态

时间:2018-03-30 06:55:01

标签: angular angular-material

我正在使用角度素材标签。我的代码如下所示:

<md-tab-group>
    <md-tab style="position: fixed;top:0;" label={{category}} *ngFor="let category of itemCategory">
    </md-tab>
</md-tab-group>

和css就是:

.q-header {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    align-items: center;
    padding-left: 10px;
    z-index: 100000000;
    /*justify-content: center;*/
    color: white;
    background-color: #42AB9E;
}

但不知何故,标签在滚动时不会保持固定状态。我怎样才能做到这一点?

1 个答案:

答案 0 :(得分:1)

<强> 1。使用:: ng-deep。

  

使用/ deep / shadow-penetcing后代组合器强制样式   通过子组件树进入所有子组件   观点。 / deep / combinator适用于任何深度的嵌套组件,   它适用于视图子节点和内容子节点   零件。使用/ deep /,&gt;&gt;&gt;和:: ng-deep仅限于模拟视图   封装。模拟是默认和最常用的视图   封装。有关更多信息,请参阅控制视图   封装部分。穿阴影的后代组合是   已弃用并且正在从主要浏览器和工具中删除支持。   因此,我们计划放弃Angular中的支持(对于所有3个/ deep /,&gt;&gt;&gt;   和:: ng-deep)。在那之前:: ng-deep应该是更广泛的首选   与工具的兼容性。

<强> CSS

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

<强> DEMO

<强> 2。使用ViewEncapsulation

  

...组件CSS样式被封装到组件的视图中   并且不会影响应用程序的其余部分。要控制这个怎么样   封装发生在每个组件的基础上,您可以设置视图   组件元数据中的封装模式。选择   以下模式:....无意味着Angular没有视图   封装。 Angular将CSS添加到全局样式中。范围界定   前面讨论的规则,隔离和保护不适用。这个   与将组件的样式粘贴到其中的基本相同   HTML。

您无需设置材料样式 零件。

<强> Typscript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

<强> CSS

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed;
}

DEMO

第3。在style.css中设置样式

这次你必须“强迫”#39;样式与!important。

的style.css

.mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
}

DEMO