How to use ion-ripple-effect?


#1

Hello,

I’m trying to use ionic-ripple-effect in ionic 4 according to the documentation with a div element:

<div style="height: 100px; width: 100%; background: green; position: relative">
  <ion-ripple-effect></ion-ripple-effect>
</div>

However, it does not work (when clicking the div, nothing happens).
When wrapping it inside an ion-item, it does work though.

<ion-list>
  <ion-item button>
      <ion-ripple-effect></ion-ripple-effect>
      <ion-label>Something</ion-label>
  </ion-item>
</ion-list>

Does anybody know how to make it work with any element? Thank you!


#2

Could you try to add ion-activatable to your div and check if that solve the issue?

<div ion-activatable ....>
  <ion-ripple-effect></ion-ripple-effect>
</div>

if not, :frowning:
if yes, maybe it would be good then to add a request for docs improvements in https://github.com/ionic-team/ionic-docs because I see that this is not displayed in the doc


#3

Thank you, this works! I’ll write a request for doc improvements then