kgrandemange / Vue Flip
Licence: mit
A Vue.js component to flip elements.
Stars: ✭ 37
Projects that are alternatives of or similar to Vue Flip
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+1132.43%)
Mutual labels: component, vue-components, vuejs2
Vue Info Card
Simple and beautiful card component with an elegant spark line, for VueJS.
Stars: ✭ 159 (+329.73%)
Mutual labels: component, vue-components, vuejs2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+14205.41%)
Mutual labels: component, vue-components, vuejs2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+483.78%)
Mutual labels: component, vue-components, vuejs2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-8.11%)
Mutual labels: component, vue-components, vuejs2
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+583.78%)
Mutual labels: component, vue-components, vuejs2
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+1072.97%)
Mutual labels: vue-components, vuejs2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+1097.3%)
Mutual labels: vue-components, vuejs2
Vue Stripe Elements
A Vue 2 component collection for StripeElements
Stars: ✭ 498 (+1245.95%)
Mutual labels: vue-components, vuejs2
Vue Burger Menu
🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.com/
Stars: ✭ 648 (+1651.35%)
Mutual labels: vue-components, vuejs2
Liquor Tree
Tree component based on Vue.js
Stars: ✭ 348 (+840.54%)
Mutual labels: component, vue-components
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+1337.84%)
Mutual labels: vue-components, vuejs2
Vue.d3.tree
Vue component to display tree based on D3.js layout.
Stars: ✭ 726 (+1862.16%)
Mutual labels: component, vuejs2
Vue Material Dashboard
Vue Material Dashboard - Open Source Material Design Admin
Stars: ✭ 403 (+989.19%)
Mutual labels: vue-components, vuejs2
Vue Tagsinput
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
Stars: ✭ 375 (+913.51%)
Mutual labels: component, vuejs2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+10781.08%)
Mutual labels: vue-components, vuejs2
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+18478.38%)
Mutual labels: vue-components, vuejs2
Vue Meteor
🌠 Vue first-class integration in Meteor
Stars: ✭ 893 (+2313.51%)
Mutual labels: vue-components, vuejs2
Fish Ui
A Vue.js 2.0 UI Toolkit for Web
Stars: ✭ 861 (+2227.03%)
Mutual labels: component, vue-components
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+54197.3%)
Mutual labels: vue-components, vuejs2
vue-flip
A component to flip elements.
Demo
Installation
Vue.js 2 :
npm i [email protected]
yarn add [email protected]
Vue.js 3 :
npm i vue-flip
yarn add vue-flip
Module
<template>
<vue-flip></vue-flip>
</template>
import VueFlip from 'vue-flip';
export default {
components: {
'vue-flip': VueFlip
}
}
Usage
Use this template:
<vue-flip>
<template v-slot:front>
front
</template>
<template v-slot:back>
back
</template>
</vue-flip>
You can active the flip on the click with:
<vue-flip active-click></vue-flip>
or you can active on the hover with:
<vue-flip active-hover></vue-flip>
or you can bind with a variable:
<vue-flip v-model="flipped"></vue-flip>
this.flipped = true; //or false -> to flip front/back
Properties
Description | Type | Required | Default Value | |
---|---|---|---|---|
active-click | flip on click | Boolean | false | false |
active-hover | flip on hover | Boolean | false | false |
height | component height | String | true | |
width | component with | String | true | |
transition | component transition | String | false | 0.5s |
v-model | bind flip with variable | Boolean | false | |
horizontal | switch to horizontal flip | Boolean | false | false |
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].