Touch Ripple
Touch Ripple is supported only in Material Theme
Framework7 Material Theme comes with great an dynamic implementation of Material Touch Ripple effect.
Enable Touch Ripple
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.
However, you may disable it by passing materialRipple:false
App parameter.
Ripple Elements
By default it is enabled for the elements that match to the following CSS selector:
.ripple, a.link, a.item-link, .button, .modal-button, .tab-link, .label-radio, .label-checkbox, .actions-modal-button, a.searchbar-clear, .floating-button
which are defined in materialRippleElements
App parameter.
So when you touch such elements you will see so called "ripple" effect.
If you need to add "ripple" effect for any custom element you may add this element's selector to materialRippleElements
parameter or just add ripple
class.
<a href="#" class="my-link ripple">Link With Ripple Effect</a>
Ripple Wave Color
If you want to change color of "ripple" wave on some element, then you may add ripple-[color]
class to thie element, where [color]
class is the one of 20 default Material Theme colors, for example:
<a href="#" class="button ripple-red">Button With Red Ripple</a>
or you may specify it using CSS:
.button .ripple-wave {
background-color: #ff0000;
}