时间戳

首页 > 解决方案 > MatRipple 继续显示无论如何

html - MatRipple 继续显示无论如何

问题描述

我在mat-radio-button元素周围的空间非常有限，所以我想禁用它。它被禁用了一半，但在hover行动中，它的“幽灵”继续显示hover如下；

悬停时

这是我的mat-radio-button；

<mat-radio-button  [disableRipple]="true" [checked]="element == expandedElement"(change)="ShowDetail(element)" ></mat-radio-button>

并且要清楚，[disableRipple]禁用显示的效果onclick而不是效果hover。有人有可能对我有帮助的解决方案吗？

这是我尝试过但不起作用的方法，它位于styles.css组件的 （这样做时document.querySelectorAll()会出现幽灵部分）；

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

仅显示的 StakblitzdisableRipple删除事件上显示的波纹onlick：示例（Auto 是具有disableRipple属性的那个）

标签： htmlcssangularangular-material

解决方案

要消除涟漪效应，您只需将以下内容添加到您的 styles.scss 文件中：

.mat-radio-ripple {
  display: none;
}

正如您在此处看到的：https ://stackblitz.com/edit/angular-ehgpd2-2hvt7s?file=src/styles.scss

这消除了材质单选按钮的波纹。

要为所有 mat 元素删除它，您可以执行以下操作：

.mat-ripple { display: none; }

如果仅用于复选框，则删除：

.mat-checkbox-ripple { display: none; }

ETC...

正如你在这里看到的：https ://github.com/angular/components/issues/17404

（另外请注意，正如guthub问题中提到的那样，焦点/点击的涟漪是为了可访问性，这就是它们难以摆脱的原因，我认为你应该记住这一点并在垫收音机上做一些事情如果活跃或有焦点）

推荐阅读