Vue Component to Make Google Material Design Ripple Effect. http://bosnaufal.github.io/vue-ripple/
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets/img First Release May 6, 2016
build Fix Sass Import May 10, 2016
src Fix Sass Import May 10, 2016
.babelrc First Release May 6, 2016
LICENSE First Release May 6, 2016
README.md Fix Sass Import May 10, 2016
index.html First Release May 6, 2016
package.json 1.0.1 May 8, 2016
webpack.config.js First Release May 6, 2016

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