移除 Material Stepper 标头

Posted 2023-03-06

【中文标题】移除 Material Stepper 标头

【英文标题】：Remove the Material Stepper header

【发布时间】：2019-01-13 22:55:49

【问题描述】：

我想摆脱材料步进器上的标题导航。请建议我该怎么做？ 我尝试设置以下 css 但似乎不起作用：

.mat-horizontal-stepper-header-containerdisplay: none

这是步进器的 stackblitz 链接。 https://stackblitz.com/edit/angular-material2-beta-ybbnhe?file=app%2Fapp.component.html

【参考方案1】：

您需要结合使用::ng-deep 来绕过shadow DOM，并使用!important 标志来绕过Materials 自己的样式：

::ng-deep .mat-horizontal-stepper-header-container 
  display: none !important;

【讨论】：

但它仍然停留在 dom 中。这不是一个理想的解决方案。只是说，我不知道更好的。

将 !important 添加到 css 是不好的做法，因为重要的样式会在原始样式之后渲染一次。这会导致浏览器两次呈现 html 元素。我的建议是使用：css :host ::ng-deep .mat-horizontal-stepper-header-container display: none;

【参考方案2】：

@Simon K 的答案是正确的。但这会影响您应用程序中的所有步进器。但是，如果您想将它用于您的特定组件，请在::ng-deep 之前使用:host。然后它不会影响您应用程序中的其他步进器（如果有）。例如@Simon K'的答案-

:host ::ng-deep .mat-horizontal-stepper-header-container 
  display: none !important;

【参考方案3】：

扩展 CSS 并在元素上使用附加属性来隐藏它的特定用例。

mat-stepper[hide-header] .mat-horizontal-stepper-header-container 
  display:none;

<mat-stepper hide-header orientation="horizontal" #stepper>

【参考方案4】：

以下代码用于隐藏垫步进器标题。 :host ::ng-deep .mat-horizontal-stepper-header-container display: none !important;

【讨论】：

这个答案已经提供，是重复的。

【参考方案5】：

你可以像这样在<mat-horizontal-stepper #stepper>中添加这个css属性：

<mat-horizontal-stepper #stepper style="display: none;">
....
</mat-horizontal-stepper>

【讨论】：

这也删除了步进器的内容。我只想删除顶部导航。