我想要在材料步进器上去掉头部导航。请建议如何做到这一点? 我尝试设置以下CSS,但似乎没有起作用:
.mat-horizontal-stepper-header-container{display: none}
这是stepper的stackblitz链接。 https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html
我想要在材料步进器上去掉头部导航。请建议如何做到这一点? 我尝试设置以下CSS,但似乎没有起作用:
.mat-horizontal-stepper-header-container{display: none}
这是stepper的stackblitz链接。 https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html
::ng-deep
组合来绕过影子DOM,并使用!important
标志来绕过材料自己的样式:::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
@Simon K的答案是正确的。但这会影响你应用程序中的所有步进器。但如果你想仅针对特定组件使用它,请在::ng-deep
之前使用:host
。那么它将不会影响应用程序中的其他步进器(如果有)。例如,@Simon K答案的示例:
:host ::ng-deep .mat-horizontal-stepper-header-container {
display: none !important;
}
通过扩展CSS并在元素上使用附加属性,可以隐藏仅特定用例的元素。
mat-stepper[hide-header] .mat-horizontal-stepper-header-container {
display:none;
}
<mat-stepper hide-header orientation="horizontal" #stepper>
:host ::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }
您可以像这样在<mat-horizontal-stepper #stepper>
中添加此CSS属性:
<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>
:host ::ng-deep .mat-horizontal-stepper-header-container { display: none; }
- Todor Todorov