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 effect

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.

Customizing the color

To customize the color of the of ripple effect the color and background attributes are used.

<ons-ripple color="#bb8fce" background="#85c1e9">

The ripple attribute

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:

  • <ons-button>
  • <ons-fab>
  • <ons-speed-dial-item>
  • <ons-list-item>

See also

Attributes

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

Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-ripple').disabled.

Name Description
disabled Whether the element is disabled or not.

Preset Modifiers

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.

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.