Extends Item

Material.Ripple

Warning

This element is not ready for general use. It may change at any time.

The Material.Ripple element allows you to add the Material design ripple effect to your own elements.

By default, Material.Ripple responds directly to touch input. If this conflicts with the touch interaction design of your element, you can disable the builtin input handling by setting the Material.Ripple.interactive property to false. In these cases, you should explicitly call the Material.Ripple.press() and Material.Ripple.release() methods to trigger the ripple effect.

property Material.Ripple.Style style: .Pulse

Sets the ripple effect style for the element.

To try out the different styles, tap and release inside the example box for each style.

Material.Ripple.Style.Pulse

Material.Ripple.Style.Bounded

Material.Ripple.Style.Circular

property Color color: #0000000F

The ripple fill color.

property Bool interactive: true

function press(Float x, Float y)

function release()

Controls interaction with the ripple effect.

When interactive is true, the Material.Ripple responds directly to touches.

If this conflicts with the touch interaction design of your element, you can disable the builtin input handling by setting interactive property to false, and calling the press() and release() methods manually from your gesture handlers.