如何在“离子按钮Ioinic 4"中禁用/消除离子波纹效应? [英] How do I disable/remove ion-ripple effect in ion-button Ioinic 4?

问题描述

我需要在"ion-button"中禁用默认的ion-ripple-effect.

I need to disable the default ion-ripple-effect in the `ion-button'.

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

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

I can't disable the pointer-events as I need it.

PS:我已经参考了以下帖子，但找不到适用于Ionic 4的适当解决方案.

PS: I've referred the following posts and could not find a proper solution for Ionic 4.

1. 如何删除离子项目的点击效果
2. 在元素上禁用波纹效果

1. How to remove click effect of an ion-item
2. Disable ripple effect on element

推荐答案

--ripple-color CSS变量可用于关闭波纹效果.

--ripple-color CSS variable could be used to turn off the ripple effect.

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

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

For example, we could set --ripple-color: transparent on the button, to effectively disable the effect.

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

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

这篇关于如何在“离子按钮Ioinic 4"中禁用/消除离子波纹效应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！