vue-waves-effect

Waves effect directive for Vue. Based on Waves.

Documentation & Demo

https://v-waves.isnur.com/

Installation

``bash
npm install vue-waves-effect --save
`

Usage

Import the plugin and add it to Vue.

`vue
// src/main.js

import Vue from 'vue';
import Waves from 'vue-waves-effect';
import 'vue-waves-effect/dist/vueWavesEffect.css';

Vue.use(Waves);
`

Then use on any element in the template.

`vue

`

Modifiers

Waves provide several classes to help you styling your effect.

- .waves-button for semi-rounded button style.
- .waves-float for float effect when the element is clicked.
- .waves-circle for circle (rounded) style.
- .waves-block for adding display: block; to element.

To use helper classes just pass modifiers to the directive:

`vue








`

Config

You can also configure Waves by passing option parameter.

`vue
Vue.use(Waves, {
duration: 500,
delay: 200
});
`

Builds

If you don't use a package manager, you can access vue-waves-effect via unpkg (CDN), download the source, or point your package manager to the url.

The vue-waves-effect package includes precompiled production and development UMD builds in the dist folder. They can be used directly without a bundler and are thus compatible with many popular JavaScript module loaders and environments. You can drop a UMD build as a