Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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

About

Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.