Reference > v-ons-ripple

v-ons-ripple

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.

Tutorial

Ripple

The VOnsRipple component is used to add a Material Design ripple effect to an element. This effect will expand from the location point the user taps until it covers the whole element.

To add a ripple effect to an element the Ripple component should be placed as a child.

<div style={{width: 100, height: 100, backgroundColor: 'grey'}}>
  <v-ons-ripple></v-ons-ripple>
</div>

The color of the ripple effect defaults to gray. It can be customized using the color property. It is also possible to customize the background color with the background property.

<v-ons-ripple color='red' background='blue'></v-ons-ripple>

The ripple prop

There are some components that support the ripple effect using a ripple property. The VOnsButton component is one of those. In this case, instead of using the Ripple component only the property ripple needs to be added:

<v-ons-button ripple>
  Ripple!
</v-ons-button>

Other components that support the ripple property are: VOnsListItem, VOnsFab, VOnsSpeedDial and VOnsTab.

See also

Props

Name Type Description
background String Color of the background. Optional.
center Boolean If this attribute presents, change the position of wave effect to center of the target element. Optional.
color String Color of the ripple effect. Optional.
disabled Boolean If this attribute is set, the ripple effect will be disabled. Optional.
modifier String The appearance of the ripple effect. Optional.
size String Sizing of the wave on ripple effect. Set “cover” or “contain”. Default is “cover”. Optional.

Preset Modifiers

Name Description
light-gray Change the color of effects to light gray.

Need Help?

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.