Disable ripple effect on element

问题

I'd like to disable the ripple effect on an ion-chip element, which fires on click:

<ion-chip>
   <ion-label>Hey</ion-label>
</ion-chip>

How can I achieve this?

回答1:

<ion-chip style="pointer-events: none;" >

that will disable the styling click event in the component. Assuming you want a click event you could put a div around it.

回答2:

please try this code to remove ripple effect

ion-chip.button-effect {
     display:none !important;
    }

回答3:

The Ripple effect is only present for the Android platform as per the source code. So, as a workaround, we can change the mode to mode="ios" to avoid the effect. There seems to be no other style difference in ion-chip amongst both the platforms.

Also, this would not mess up the existing pointer-events.

<ion-chip mode="ios">
  <ion-label>Hey </ion-label>
</ion-chip>

Credits: Inspired by @rtpharry's answer to an alike question.

来源：https://stackoverflow.com/questions/55865732/disable-ripple-effect-on-element