Ripple directive adds ripple effect to the host element.
import { RippleModule } from 'primeng/ripple';
Default Demo Content.
<div pRipple class="card text-primary bg-primary flex select-none justify-content-center align-items-center shadow-2">Default</div>
Styling Demo Content.
<div pRipple class="card styled-box-green shadow-2">Green</div>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-ripple | Host element. |
p-ink | Ripple element. |
p-ink-active | Ripple element during animating. |
API defines helper props, events and others for the PrimeNG Ripple module.