Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add ripple effect to an ionic 2 element?

Some elements, like the button, have native ripple effect on Ionic 2. Others like cards doesn't. How could I add support to ripple effect on an arbitrary Ionic 2 element?

like image 878
Natanael Avatar asked Aug 03 '16 16:08

Natanael


People also ask

What is ion ripple effect?

The ripple effect component adds the Material Design ink ripple interaction effect. This component can only be used inside of an <ion-app> and can be added to any component.

What causes a ripple effect?

A ripple effect occurs when an initial disturbance to a system propagates outward to disturb an increasingly larger portion of the system, like ripples expanding across the water when an object is dropped into it.

How do you remove the ripple effect from the ion button?

--ripple-color CSS variable could be used to turn off the ripple effect. For example, we could set --ripple-color: transparent on the button, to effectively disable the effect.


1 Answers

Try wrapping the content like this:

<button ion-item>
   <ion-item style="background: rgba(0,0,0,0);">Content</ion-item>
</button>
like image 73
kosiara - Bartosz Kosarzycki Avatar answered Sep 20 '22 18:09

kosiara - Bartosz Kosarzycki