vue-ripple

1.0.2 • Public • Published

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

Package Sidebar

Install

npm i vue-ripple

Weekly Downloads

13

Version

1.0.2

License

MIT

Last publish

Collaborators

  • bosnaufal