A material ripple for Angular that does not activate when swiping
https://waseemw.github.io/better-ripple/demo
- Ripple timeout: timeout before the ripple is activated, so that it doesn't activate while scrolling. It also actives immediately on mousedown, and the click event as well.
- Disable on propagation: the ripple can be disabled when the events are propagated from child elements.
- Install with npm using
npm i better-ripple - Import the library in your module with
import { BetterRippleModule } from 'better-ripple';and addBetterRippleModuleto your imports - Add 'betterRipple' directive to any component to add the ripple effect; betterRipple extends matRipple so anything that worked with matRipple will work with betterRipple
| Attribute | Default Value | Description |
|---|---|---|
| betterRipple | N/A | Directive. Required before adding any of the other inputs |
| rippleTimeout | 100 | Number. The timeout between touchdown and ripple activation in ms |
| noRippleOnPropagation | N/A | Declared without value, once declared, any touch or mousedown events on children components will not trigger the event |
You can check the demo for a complete example, and here is the basic usage:
<mat-card betterRipple>
<mat-card-header>Using betterRipple</mat-card-header>
<mat-card-content style="margin-bottom: 0">Ripple will not activate while scrolling</mat-card-content>
</mat-card>
Run ng build better-ripple to build the library. The build artifacts will be stored in the dist directory.
Before running the demo, build the library as mentioned above, and then run the demo with ng serve demo