2.0.3 • Published 1 year ago
vue-reveal-effect v2.0.3
🌈 Demo
🚀 Requirements
- Chorme 76+
- Vue 3+
⚙️ Installation
npm i -S vue-reveal-effect
🦄 Use in JS
<h1 id="reveal1">REVEAL EFFECT</h1>
<h1 id="reveal2">REVEAL EFFECT</h1>
<h1 id="reveal3">REVEAL EFFECT</h1>
<script>
import { useRevealEffect } from 'vue-reveal-effect';
const options2 = {
borderWidth: 4,
borderColor: 'rgba(255, 0, 0, 40%)',
borderSize: 40,
bgSize: 40
bgColor: '#00a1ff'
}
const options3 = {
borderWidth: 2,
clickEffect: false
}
useRevealEffect(document.getElementById('reveal1'));
useRevealEffect(document.getElementById('reveal2'), options2);
useRevealEffect(document.getElementById('reveal3'), options3);
</script>
🦄 Use in Vue
import { createApp } from 'vue'
import VueRevealEffect from 'vue-reveal-effect'
createApp(App).use(VueRevealEffect).mount('#app')
<template>
<h1 v-reveal-effect>VUE REVEAL EFFECT</h1>
<h1 v-reveal-effect="options1">VUE REVEAL EFFECT</h1>
<h1 v-reveal-effect="options2">VUE REVEAL EFFECT</h1>
</template>
<script setup>
const options1 = {
borderWidth: 4,
borderColor: 'rgba(255, 0, 0, 40%)',
borderSize: 40,
bgSize: 40
bgColor: '#00a1ff'
}
const options2 = {
borderWidth: 2,
clickEffect: false
}
</script>
📄 Props
Name | Type | Default | Description |
---|---|---|---|
borderWidth | MaybeRef<number> | 1 | |
borderColor | MaybeRef<string> | ||
borderGradientSize | MaybeRef<number> | 100 | |
bgColor | MaybeRef<string> | ||
bgGradientSize | MaybeRef<number> | 130 | |
clickEffect | MaybeRef<boolean> | true | Enable ripple click effect |
light | MaybeRef<boolean> | ||
disabled | MaybeRef<boolean> | false |
☹ Not Supported
- ❌
border-radius
attribute of css is not supported - ❌
<img />
tag of html is not supported
⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
👏 Contributing
If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.
2.0.3
1 year ago
2.0.2
1 year ago
2.0.1
1 year ago
2.0.0
1 year ago
0.0.22
1 year ago
0.0.21
1 year ago
0.0.20
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago
0.0.0
2 years ago