如何从角度为6/7/8的步进器中禁用波纹效果，这是去除选项卡和按钮等波纹的选项

Question

可以单击以选择时间波动即将到来的步骤的标题，我想从该步进器中删除或禁用波动。

<mat-vertical-stepper>
  <mat-step label="Step 1">
    Content 1
  </mat-step>
  <mat-step label="Step 1">
    Content 2
  </mat-step>
</mat-vertical-stepper>

也请向我解释此属性的工作方式。是否应禁用步骤标题的波纹。

@Input()
disableRipple: boolean

Answer 1

<mat-vertical-stepper [disableRipple]="true">

做到了。见here。

Answer 2

• 在点击鼠标左键时消除涟漪效应不是火箭科学 垫步进或更改该步骤。我们也可以通过 CSS hacks 做到这一点。
在我们单击
• Angular 添加一些CSS 类 一个元素，以便我们可以通过这种方式进行更改。

.mat-step-header:hover{
    background-color: white !important;
}
.mat-step-header.cdk-program-focused {
      background-color: white;
  }
.mat-step-header.cdk-mouse-focused{
    background-color: white;
}
.mat-step-header.cdk-focused{
    background-color: white;
}