Ripple
Ripple directive adds ripple effect to the host element.
Import #
import { RippleModule } from 'primeng/ripple';
Default #
Default Demo Content.
Ripple option at the configurator needs to be turned on for the demo.
Default
<div pRipple class="ripple-box">Default</div>
Custom #
Styling Demo Content.
Ripple option at the configurator needs to be turned on for the demo.
Green
Orange
Purple
<div pRipple class="box" style="border: 1px solid rgba(75, 175, 80, 0.3); --p-ripple-background: rgba(75, 175, 80, 0.3)">
Green
</div>
<div pRipple class="box" style="border: 1px solid rgba(255, 193, 6, 0.3); --p-ripple-background: rgba(255, 193, 6, 0.3)">
Orange
</div>
<div pRipple class="box" style="border: 1px solid rgba(156, 39, 176, 0.3); --p-ripple-background: rgba(156, 39, 176, 0.3)">
Purple
</div>
Accessibility #
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.
