Ripple

Ripple directive adds ripple effect to the host element.

Ripple option at the configurator needs to be turned on for the demo.
Default
PREVIEW

To start with, Ripple needs to be enabled globally. See the Configuration API for details.

Ripple is enabled by adding the v-ripple directive to the host element.

Ripple option at the configurator needs to be turned on for the demo.
Default
default-demo

Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of p-ink element.

Ripple option at the configurator needs to be turned on for the demo.
Green
Orange
Purple
custom-demo

Screen Reader

Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.

Keyboard Support

Component does not include any interactive elements.

Theme Designer