Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: option to enable/disable ripple effect on components

See original GitHub issue

Feature Request

Provide an option to enable/disable the ripple animation effect on Ionic components.

Ionic version:

[x] 4.x

Describe the Feature Request

The ripple effect animation on components in the Android platform does not look great in certain scenarios, especially when space is constrained. I could not find any option to disable the same in the documentation.

Describe Preferred Solution

Provide an option/property to disable the ripple effect on components like <ion-button>, <ion-card> etc.

Describe Alternatives

None I could find. Workarounds include setting platform mode to ios or pointer-events to none in certain cases.

Related Code

A possible use of the proposed solution,

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

Additional Context

Refer the following SO questions

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

liamdebeasicommented, Oct 15, 2019

You can use the --ripple-color CSS variable for things like buttons: https://codepen.io/liamdebeasi/pen/BaaKMxq. In this example I set --ripple-color: transparent on the first button.

Does that work for your use case?

0reactions

ionitron-bot[bot]commented, Nov 15, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Top Results From Across the Web

feat: option to enable/disable ripple effect on components ...

Provide an option to enable/disable the ripple animation effect on Ionic components. ... The ripple effect animation on components in the Android ...

How to disable ripple in Material Design React - Stack Overflow

According to Material-UI documentation, you can disable the ripple effect globally by providing the following in your theme:

Angular Material Disable Ripple Animation - StackBlitz

Issue template for @angular/material.

Material Ripples - Quasar Framework

Disable. If for some reason you have a scenario where the ripples need to be disabled, then you can assign a Boolean as...

Material Design 2 in Compose - Jetpack - Android Developers

Material Components use ripples to indicate they're being interacted with. If you're using MaterialTheme in your hierarchy, a Ripple will be used as...