如何禁用/删除离子按钮 Ioinic 4 中的离子波纹效果？

Question

我需要禁用ion-ripple-effect“离子按钮”中的默认值。

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

我无法pointer-events根据需要禁用它。

PS：我参考了以下帖子，但找不到适合 Ionic 4 的解决方案。

1. 如何去除离子项的点击效果
2. 禁用元素上的涟漪效应

Answer 1

--ripple-color CSS 变量可用于关闭涟漪效应。

 <ion-button class="no-ripple">
   <ion-icon slot="icon-only" name="trash"></ion-icon>
 </ion-button>

例如，我们可以--ripple-color: transparent在按钮上设置，以有效禁用该效果。

.no-ripple {
  --ripple-color: transparent;
}

参考https://github.com/ionic-team/ionic/issues/19648