vue-flip
A component to flip elements.
Demo
Installation
Vue.js 2 :
npm i vue-flip@1.0.2
yarn add vue-flip@1.0.2
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/backProperties
| 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 |