Waves effect directive for Vue. Based on Waves.
npm install vue-waves-effectWaves effect directive for Vue. Based on Waves.
``bash`
npm install vue-waves-effect --save
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`
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