Touch Ripple

Framework7 Material Theme comes with great an dynamic implementation of Material Touch Ripple effect.

It is enabled by default for Material theme. Touch Ripple is a part of the built-in Fast Clicks library, so Fast Clicks should be also enabled.

By default it is enabled for the elements that match to the following CSS selector:

which are defined in touch.materialRippleElements App parameter.

If you need to add “ripple” effect for any custom element you may add this element’s selector to parameter or just add ripple class.

If you want to change color of “ripple” wave on some element, then you may add class to required element, where **[color]** class is the one of default , for example:

If you want to disable ripple element for specific elements, then you may add no-ripple class to such elements: