README
🌊 v-ripple-directive
Vue.js directive for ripple effect.
✨ Features
- lightweight (
~964b
gzip). - fully customizable during runtime/build.
- build upon CSS Custom properties.
Demo
💿 Installation
Via NPM
npm install v-ripple-directive --save
Via Yarn
yarn add v-ripple-directive
Initialization
🎨 Styles
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
/SCSS
:
@import 'v-ripple-directive/src/index.scss';
Available SASS
variables, that you can override during build process:
$v-ripple-color: #fff !default;
$v-ripple-duration: 2s !default;
$v-ripple-opacity: 0.32 !default;
$v-ripple-scale-start: 0.32 !default;
$v-ripple-scale-end: 24 !default;
Example of overriding:
...
$v-ripple-color: purple;
@import 'v-ripple-directive/src/index.scss';
...
Note: library is build upon CSS Custom properties, so you can easily override styles during runtime.
Available CSS
custom properties, that you can override during runtime:
:root {
--v-ripple-color: #fff;
--v-ripple-duration: 2s;
--v-ripple-opacity: 0.32;
--v-ripple-scale-start: 0.32;
--v-ripple-scale-end: 24;
}
Example of override:
/* globally */
:root {
--v-ripple-color: tomato;
}
/* just for single element */
.foo {
--v-ripple-color: lime;
}
Move on to JS
.
As a plugin
It must be called before new Vue()
.
import Vue from 'vue'
import VRipple from 'v-ripple-directive'
Vue.use(VRipple)
As a global directive
import Vue from 'vue'
import { directive } from 'v-ripple-directive'
Vue.directive('ripple', directive)
As a local directive
import { directive } from 'v-ripple-directive'
export default {
name: 'YourAwesomeComponent',
directives: {
ripple: directive,
},
}
🚀 Usage
<template>
<section>
<a href="#" v-ripple>Foo bar</a>
<!-- v-ripple with custom options -->
<a href="#" v-ripple="{ event: 'mouseenter', color: 'purple', duration: '2s', opacity: '0.64', 'scale-start': '1', 'scale-end': '12' }">Foo bar</a>
</section>
</template>
⚙️ Directive value
If you pass a value, it always should be an object that contains one of these properties:
Property | Description |
---|---|
event |
Name of event to trigger ripple animation |
color |
Color of the ripple (any CSS valid color ) |
duration |
Duration of the ripple animation (any CSS valid animation-duration value) |
opacity |
Opacity of the ripple (any CSS valid opacity value) |
scale-start |
Initial scale of the ripple (any CSS valid transform: scale() value) |
scale-end |
Ultimate scale of the ripple (any CSS valid transform: scale() value) |
Powered by
Rollup
(and plugins)SASS
andnode-sass
PostCSS
Autoprefixer