v-ripple-directive

    0.2.0 • Public • Published

    🌊 v-ripple-directive

    Vue.js directive for ripple effect.

    ✨ Features

    Demo

    Edit v-ripple-directive

    💿 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 and node-sass
    • PostCSS
    • Autoprefixer

    🔒 License

    MIT

    Install

    npm i v-ripple-directive

    DownloadsWeekly Downloads

    151

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • 3vil_arthas