vue-rippler

Simple Vue.js plugin for custom ripple effect
3,148 42
vue vuejs plugin javascript library design css button js ripple material effect npm yarn spemer hyouk seo
Install
npm install vue-rippler
Latest Version:1.3.3
Vue:2
License:MIT
Last Updated:Dec 10, 2022
Links: GitHub  ·  npm
Maintainer: spemer

vue-rippler 🎉

Simple Vue.js plugin for custom ripple effect

vue2 Version Gzipsize Awesome License Hits stargazers

Live Demo

Installation

npm i vue-rippler --save

yarn add vue-rippler

CDNs

jsDelivr, UNPKG, bundle.run

Usage

main.js

// main.js
import Vue from "vue";
import VueRippler from "vue-rippler";

Vue.use(VueRippler);

Use in component

// .vue template
<template>
  <my-component ripple />
</template>

Set ripple style, and customize as you want(Optional)

<style>
/*
play with some lines below
*/
[ripple] .ripple--container .ripple--body {
  opacity: 0.5 !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
  -webkit-animation: rippler 1000ms;
          animation: rippler 1000ms;
}
</style>

Author

Hyouk Seo(Spemer)

Related Packages

vue-scroll-progress

Simple Vue.js plugin for page scroll progress bar

4,838 98
button css design hyouk seo javascript js library material npm plugin +5
vue-kakao-pf

Simple Vue.js plugin for Kakao plus friend chat

1,164 2
button css hyouk seo javascript js library npm plugin spemer vue +7
simple-shimmer

A pure css simple shimmer like facebook.

1,607 1
css javascript js npm vue facebook node nuxt pure react +2
eos_vue_md_components

A simple set of styled components for Vue JS

492
design js material vue components
vue-ripple-directive

Vue Material Ripple Effect Directive

273,076 278
button material ripple vue directive ripple effect

Version History

Version Released Vue License
1.3.3 ^2.5.11 MIT
1.3.2 ^2.5.11 MIT
1.3.1 ^2.5.11 MIT
1.3.0 ^2.5.11 MIT
1.2.9 ^2.5.11 MIT