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-button> and <ons-fab> support a ripple attribute.
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 color and background attributes are used.
<ons-ripple color="#bb8fce" background="#85c1e9">
ripple attributeThere 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:
<ons-button><ons-fab><ons-speed-dial-item><ons-list-item>Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-ripple someAttribute="true" anotherAttribute><ons-ripple>
JS: document.querySelector('ons-ripple').setAttribute('someAttribute', 'true')
| Name | Type | Description |
|---|---|---|
| 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. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-ripple').center.
| Name | Description |
|---|---|
| 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. |
Modifiers are set in the modifier attribute. To use more than one, separate them by spaces. For example:
<ons-ripple modifier="light-gray
modifier2"><ons-ripple>.
| Name | Description |
|---|---|
| light-gray | Change the color of effects to light gray. |
If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.
For bug reports and feature requests use our GitHub Issues page.