surmon-china / Vue Touch Ripple
Licence: mit
👆 Touch ripple component for @vuejs
Stars: ✭ 443
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Touch Ripple
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-71.33%)
Mutual labels: vue-components, vue2, vue-plugin, vue-component, vue-resource, vue-demo
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+377.43%)
Mutual labels: vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+2625.06%)
Mutual labels: vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+1451.69%)
Mutual labels: vue-components, vue-component, vuejs2, vue2, vue-plugin, vue-resource
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+808.8%)
Mutual labels: vue-components, vue-component, vuejs2, vue2, vue-resource
Vue Cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区,使用webpack2打包
Stars: ✭ 1,134 (+155.98%)
Mutual labels: vue-demo, vue-components, vuejs2, vue2
Easy Vue
Learn vueJS Easily 👻
Stars: ✭ 896 (+102.26%)
Mutual labels: vue-demo, vuejs2, vue2, vue-resource
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-85.55%)
Mutual labels: vuejs2, vue-components, vue2, vue-component
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+4434.99%)
Mutual labels: vue-components, vue-component, vuejs2, vue2
Vue Toastr
Vuejs Toast : Plugin and Component Capability.
Stars: ✭ 93 (-79.01%)
Mutual labels: vue-component, vuejs2, vue2, vue-plugin
Vue Particles
Vue.js component for particles backgrounds ✨
Stars: ✭ 1,220 (+175.4%)
Mutual labels: vue-components, vue-component, vuejs2, vue2
Xcui
🍴 A Vue.js 2.x desktop components colletion
Stars: ✭ 88 (-80.14%)
Mutual labels: vue-components, vue-component, vuejs2, vue2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-42.89%)
Mutual labels: vue-components, vue-component, vuejs2, vue2
Vue2 Demo
Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
Stars: ✭ 2,072 (+367.72%)
Mutual labels: vue-demo, vuejs2, vue2
vue-methods-promise
Let Vue methods support return Promise
Stars: ✭ 35 (-92.1%)
Mutual labels: vue2, vue-plugin, vue-demo
v-tostini
Toast plugin for Vue.js 2.x
Stars: ✭ 12 (-97.29%)
Mutual labels: vue-components, vue-plugin, vue-component
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+12.19%)
Mutual labels: vue-demo, vuejs2, vue2
jooger.me
👍 My personal website,powered by @nuxt
Stars: ✭ 39 (-91.2%)
Mutual labels: vuejs2, vue-component, vue-demo
vue2
【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。
Stars: ✭ 415 (-6.32%)
Mutual labels: vue-components, vue2, vue-plugin
Vue-Touch-Ripple
Touch ripple component for Vue.
Example
Install
CDN
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-touch-ripple.js"></script>
<link rel="stylesheet" href="path/to/dist/vue-touch-ripple.css"/>
<script type="text/javascript">
Vue.use(window.VueTouchRipple, /* { default global options } */)
</script>
NPM
npm install vue-touch-ripple --save
Mount
mount with global
import Vue from 'vue'
import VueTouchRipple from 'vue-touch-ripple'
// import styles
import 'vue-touch-ripple/dist/vue-touch-ripple.css'
// mount with global
Vue.use(VueTouchRipple, /* {
// default global options
color: '#fff',
opacity: 0.3,
speed: 1,
transition: 'ease'
} */)
mount with component
import { touchRipple } from 'vue-touch-ripple'
// import styles
import 'vue-touch-ripple/dist/vue-touch-ripple.css'
export default {
components: {
touchRipple
}
}
Component
<template>
<touch-ripple :speed="1" :opacity="0.3" color="#fff" transition="ease">
<!-- your element... -->
<h1>it's a h1 title</h1>
<div>it's a div block</div>
</touch-ripple>
</template>
Options
prop | type | default |
---|---|---|
speed | Number |
1 |
color | String |
#fff |
opacity | Number |
0.3 |
transition | String |
ease-out |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].