1.1.1 • Published 4 years ago
vue-animate-buttons v1.1.1
Vue button animation set
Start
npm install vue-animate-buttons -SUsage
// Global import in main.js
import VueAnimateButtons from 'vue-animate-buttons';
Vue.use(VueAnimateButtons);
// Import on demand in Vue file
import { ButtonBounce, ...... } from 'vue-animate-buttons';
components: {
'button-bounce': ButtonBounce
},
<button-bounce
@click="onClick"
:button-type="'submit'"
:className="'vue'"
:is-slot="true"
:type="'in'"
>
This is an animation button
</button-bounce>
// CSS Control colors
.vue:before {
background: red !important;
}Buttons
| name | props | difference |
|---|---|---|
| ButtonBounce | styles, click, text, isSlot, className, type | type (in , out) |
| ButtonBubble | styles, click, text, isSlot, className, position | position (left, right, top, bottom) |
| ButtonBubbleFloat | styles, click, text, isSlot, className, position | position (left, right, top, bottom) |
| ButtonBuzz | styles, click, text, isSlot, className | |
| ButtonCurl | styles, click, text, isSlot, className, direction | direction (top-left; top-right; bottom-right; bottom-left) |
| ButtonFloatShadow | styles, click, text, isSlot, className | |
| ButtonGrow | styles, click, text, isSlot, className | |
| ButtonGrowRotate | styles, click, text, isSlot, className | |
| ButtonOverlineReveal | styles, click, text, isSlot, className | |
| ButtonPop | styles, click, text, isSlot, className | |
| ButtonPulse | styles, click, text, isSlot, className | |
| ButtonPulseGrow | styles, click, text, isSlot, className | |
| ButtonPulseShrink | styles, click, text, isSlot, className | |
| ButtonPush | styles, click, text, isSlot, className | |
| ButtonRipple | styles, click, text, isSlot, className, type | type (in, out) |
| ButtonRotate | styles, click, text, isSlot, className | |
| ButtonShrink | styles, click, text, isSlot, className | |
| ButtonUnderline | styles, click, text, isSlot, className, direction | direction (left, center, right) |
| ButtonUnderlineReveal | styles, click, text, isSlot, className | |
| ButtonWobble | styles, click, text, isSlot, className, direction | direction (horizontal, vertical) |
Author
leehormone@yean.net