vue-waves-effect
Waves effect directive for Vue. Based on Waves.
Documentation & Demo
Installation
npm install vue-waves-effect --save
Usage
Import the plugin and add it to 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.
<template> <button v-waves></button></template>
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:
<button v-waves.button></button><button v-waves.button.float></button><button v-waves.button.light></button> <span v-waves.circle></span><span v-waves.circle.float></span><span v-waves.circle.light></span> <div v-waves.block></div><div v-waves.block.float></div>
Config
You can also configure Waves by passing option parameter.
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 <script>
tag on your page. The UMD builds make vue-waves-effect
available as a window.vueWavesEffect
global variable.
License
The code is available under the MIT license.
Contributing
We are open to contributions, see CONTRIBUTING.md for more info.