0.1.1 • Published 2 years ago
svelte-ripple v0.1.1
svelte-ripple
Ripple effect from the soon to be deprecated Svelte Materialify as a standalone npm package.
- zero dependencies
- works on any element (not just buttons)
- implemented as a svelte action
Install
npm install svelte-ripple
Import
import Ripple from 'svelte-ripple'
Use | simplest
<div use:Ripple>
// div content
</div>
Use | with options
<div use:Ripple={{ centered: false, color: 'red' }}>
// div content
</div>
These are the defaults, all can be passed in as options:
const defaults = {
color: 'currentColor',
class: '',
opacity: 0.1,
centered: false,
spreadingDuration: '.4s',
spreadingDelay: '0s',
spreadingTimingFunction: 'linear',
clearingDuration: '1s',
clearingDelay: '0s',
clearingTimingFunction: 'ease-in-out',
}