Vue.js directive for ripple effect.
- lightweight (
- fully customizable during runtime/build.
- build upon CSS Custom properties.
npm install v-ripple-directive --save
yarn add v-ripple-directive
To make everything work you should import core styles.
The idea behind is that you can override default styles during build process.
Example of using
SASS variables, that you can override during build process:
Example of overriding:
Note: library is build upon CSS Custom properties, so you can easily override styles during runtime.
CSS custom properties, that you can override during runtime:
Example of override:
/* globally *//* just for single element */
Move on to
As a plugin
It must be called before
As a global directive
As a local directive
name: 'YourAwesomeComponent'directives:ripple: directive
Foo bar<!-- v-ripple with custom options -->Foo bar
⚙️ Directive value
If you pass a value, it always should be an object that contains one of these properties:
||Name of event to trigger ripple animation|
||Color of the ripple (any
||Duration of the ripple animation (any
||Opacity of the ripple (any CSS valid
||Initial scale of the ripple (any CSS valid
||Ultimate scale of the ripple (any CSS valid