Home

Awesome

Vue Ripple

Vue Component to Make Google Material Design Ripple Effect. It's adopted from angular-ripple

DEMO

Install

You can import vue-ripple to your vue component file like this and process it with your preprocessor.;

You can install it via NPM

npm install vue-ripple

Usage

Usage With Predefined Ripple Button


<template>
  <div>
    <ripple-button> Click On Me! </ripple-button>
  </div>
</template>

<script>

  import { rippleButton } from './index.js';

  export default {
    components: { rippleButton }
  };

</script>

Usage Standalone Ripple Component

<template>
  <button
    class="Ripple-parent"
    @mouseup="handleClick"
    @touchend="handleClick">
      Click On Me!
      <ripple v-bind:cursor-pos="cursorPos"></ripple>
  </button>
</template>


<script>

  import { ripple } from 'vue-ripple';

  export default {

    data(){
      return{
        cursorPos: {}
      }
    },

    components: { ripple },

    methods: {
      handleClick(e){
        // Get Cursor Position
        this.cursorPos = {
          top: e.clientY,
          left: e.clientX
        }
      }
    }

  };

</script>

Props

cursorPos (Object)

You need to describe the cursor position ( when parent is clicked ) with the structure like the object bellow

let cursorPos = {
  top: e.clientY,
  left: e.clientX
}

Thank You for Making this useful~

Let's talk about some projects with me

Just Contact Me At:

License

MIT Copyright (c) 2016 - forever Naufal Rabbani