https://github.com/BosNaufal/vue-ripple

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

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/BosNaufal/vue-ripple
• Owner: BosNaufal
• License: mit
• Created: 2016-05-06T15:37:27.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-15T10:03:13.000Z (over 7 years ago)
• Last Synced: 2024-09-21T11:53:53.545Z (4 months ago)
• Language: Vue
• Size: 45.9 KB
• Stars: 47
• Watchers: 3
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-ripple - Vue Component to Make Google Material Design Ripple Effect by [@BosNaufal](https://github.com/BosNaufal) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-vue - vue-ripple - ripple?style=social) - 制作谷歌MD风格涟漪效果的Vue组件 (UI组件)
• awesome-material-design - vue-ripple - Simple Ripple implemented in Vue (Vue / Components)
• awesome-github-vue - vue-ripple - 制作谷歌MD风格涟漪效果的Vue组件 (UI组件)
• awesome-github-vue - vue-ripple - 制作谷歌MD风格涟漪效果的Vue组件 (UI组件)
• awesome - vue-ripple - 制作谷歌MD风格涟漪效果的Vue组件 (UI组件)

README

        
# Vue Ripple

[Vue](http://vuejs.org/) Component to Make Google Material Design Ripple Effect. It's adopted from [angular-ripple](https://github.com/nelsoncash/angular-ripple)

[DEMO](https://bosnaufal.github.io/vue-ripple)

## Install

You can import [vue-ripple](./src/js/components/index.js) to your vue component file like [this](./src/js/components/app.js) and process it with your preprocessor.;

You can install it via NPM

```bash

npm install vue-ripple

```

## Usage

Usage With Predefined Ripple Button

```html

  


     Click On Me! 

  


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

  export default {

    components: { rippleButton }

  };

```

Usage Standalone Ripple Component

```html

  

      Click On Me!

      

  

  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

        }

      }

    }

  };

```

## Props

##### cursorPos (Object)

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

```javascript

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:

- Email: [[email protected]](mailto:[email protected])

- Skype Id: bosnaufal254

- twitter: [@BosNaufal](https://twitter.com/BosNaufal)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2016 - forever Naufal Rabbani