A Vue.js component to flip elements

vue-flip .A component to flip elements.

Demo

Here

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/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

Download Details:

Author: kgrandemange

Demo: https://kgrandemange.github.io/vue-flip/

Source Code: https://github.com/kgrandemange/vue-flip

#vuejs #vue #javascript