我正在使用角度素材标签。我的代码如下所示:
<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;
}
但不知何故,标签在滚动时不会保持固定状态。我怎样才能做到这一点?
答案 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;
}
第3。在style.css中设置样式
这次你必须“强迫”#39;样式与!important。
的style.css
.mat-tab-header{
z-index: 999;
width:100vw;
position: fixed !important;
}