Vue.js directive for ripple effect.

• lightweight (~964b gzip).
• fully customizable during runtime/build.
• build upon CSS Custom properties.

npm install v-ripple-directive --save

yarn add v-ripple-directive

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css"></link>
<script src="https://unpkg.com/[email protected]/dist/v-ripple-directive.min.js"></script>
<script>
  Vue.use(VRipple)
</script>

⚠️ Don't forget to include script with Vue.js before installing the plugin.

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.

It must be called before new Vue().

import Vue from 'vue'
import VRipple from 'v-ripple-directive'

Vue.use(VRipple)

import Vue from 'vue'
import { directive } from 'v-ripple-directive'

Vue.directive('ripple', directive)

import { directive } from 'v-ripple-directive'

export default {
  name: 'YourAwesomeComponent',
  directives: {
    ripple: directive,
  },
}

<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>

If you pass a value, it always should be an object that contains one of these properties:

• Rollup (and plugins)
• SASS and node-sass
• PostCSS
• Autoprefixer

MIT