Vue Micro-Interaction(β)
Micro interaction library with vue.
Instalation
npm i vue-micro-interaction
Usage
- All Components
import Vue from 'vue'
import app from './App.vue'
import vueMicroInteraction from '../src'
Vue.use(vueMicroInteraction)
new Vue({
el: '#app',
render: h => h(app)
})
<v-micro-hover-sticky>hover<v-micro-hover-sticky>
- Per Component
<script>
import {HoverSticky} from 'vue-micro-interaction'
export default {
name: 'Example',
components: {
HoverSticky,
},
}
</script>
HoverSticky
name | type | default | about |
---|---|---|---|
duration | Number | 0.1 | Transition seccond. |
strength | Number | 1 | Sticky strength. |
styles | {[key: String]: String} | {} | Styles passed to the parent element. |
Ripples
name | type | default | about |
---|---|---|---|
size | Number | 50 | Diameter pixcel of ripples. |
time | Number | 500 | Time when ripples are displayed. |
color | String | #000 | Color of ripples. |
zIndex | Number | 999 | zIndex of ripples. |
duration | Number | 0.1 | Transition seccond. |
styles | {[key: String]: String} | {} | Styles passed to the parent element. |
Shake
name | type | default | about |
---|---|---|---|
eventType | String | click | String to pass to addEventListener. |
range | {[key: String]: Number} | {x: 2, y: 0, z: 0} | Width of shaking. |
iteration | Number | 1 | Number of iterations. |
perspective | Number | 50 | Perspective when shaking in the Z direction. transform: perspective(${perspective}px)
|
duration | Number | 0.1 | Transition seccond. |
styles | {[key: String]: String} | {} | Styles passed to the parent element. |