Adds a Material Design “ripple” effect to an element. The ripple effect will spread from the position where the user taps.
Some elements such as
<ons-fab> support a
The ripple effect is a part of Material Design. The effect extends from the point the user taps to the edges of the element.
Try to click the square below to see it in action.
To customize the color of the of ripple effect the
background attributes are used.
<ons-ripple color="#bb8fce" background="#85c1e9">
There are some elements that support the
ripple attribute. For these elements adding a ripple effect is very simple.
<ons-button ripple> Tap me! </ons-button>
The elements that support this attribute are:
|color||String||Color of the ripple effect. Optional.|
|modifier||String||The appearance of the ripple effect. Optional.|
|background||String||Color of the background. Optional.|
|size||String||Sizing of the wave on ripple effect. Set “cover” or “contain”. Default is “cover”. Optional.|
|center||Boolean||If this attribute presents, change the position of wave effect to center of the target element. Optional.|
|disabled||If this attribute is set, the ripple effect will be disabled. Optional.|
|center||If this attribute presents, change the position of wave effect to center of the target element.|
|disabled||Whether the element is disabled or not.|
|light-gray||Change the color of effects to light gray.|
For bug reports and feature requests use our GitHub Issues page.