Angular Material 6禁用复选框和单选按钮上的波纹

Question

我遇到的情况是，单选按钮靠在嵌套在几层深的容器边缘的容器上，并具有溢出自动功能。角材料单选按钮具有波纹效果，该效果会被剪切。我不想重做整个事情，而是要使用disableRipple消除波纹。如点击stackblitz所示，并且如下面的屏幕快照所示，在选项卡之间进行制表时似乎无法使用，如下面的屏幕快照所示，在该选项卡上我制表而非单击顶部的选项1。我尝试将css更新为显示：无，但是当焦点改变时，根本没有视觉提示。在我看来，波纹效应应该覆盖以避免削波问题，但这不是它的工作原理。那么有没有办法同时关闭选项卡和单击呢？

Answer 1

我知道这是一篇旧文章，但以为我可以帮助某人。您可以添加：

.mat-ripple-element{
  display: none !important;
}

Answer 2

尽管在键盘上单击单选按钮时，涟漪元素会“起波纹”，但从技术上讲，它更多地是焦点/触摸指示器，而不是单击波纹。没有它，您将无法分辨出您的关注点在哪里。单选按钮单击本身没有问题，因为它被填充了，因此可以直观地看到更改。除了覆盖div.mat-ripple-element background-color属性外，我看不到任何其他解决方法。由于不确定焦点指示，我不确定自己是否愿意这样做。您是否真的需要隐藏溢出？为什么不使用overflow: visible？

Answer 3

您可以减小波纹的大小。

   :host ::ng-deep .mat-radio-button .mat-radio-ripple {
  position: absolute;
  left: calc(80% - 10px);
  top: calc(50% - 10px);
  height: 20px;
  width: 20px;
  z-index: 1;
  pointer-events: none;
}

Answer 4

在不使用:: ng-deep覆盖Angular材质的情况下，不可能禁用波纹效果。例如幻灯片切换按钮：

::ng-deep .mat-slide-toggle-ripple {
  display: none;
}