Flip Elements In Vue.js 3/2

A Vue.js 3/2 component that enables you to flip an element on your web app.

How to use it:

1. Import and register the VueFlip component.

import { VueFlip } from 'vue-flip';
export default {
  components: {
    'vue-flip': VueFlip
  }
}

2. Add front & back content to the flip component.

<vue-flip>
  <template v-slot:front>
    ...
  </template>
  <template v-slot:back>
    ...
  </template>
</vue-flip>

3. Available component props.

activeClick: {
  type: Boolean,
  required: false,
  default: false,
},
activeHover: {
  type: Boolean,
  required: false,
  default: false,
},
horizontal: {
  type: Boolean,
  required: false,
  default: false,
},
width: {
  type: String,
  required: true,
  validator: validateWidth,
},
height: {
  type: String,
  required: true,
  validator: validateHeight,
},
transition: {
  type: String,
  required: false,
  default: "0.5s",
  validator: validateTransitionDuration,
},
modelValue: {
  type: Boolean,
  required: false,
},

Preview:

Flip Component For Vue.js

Changelog:

v3.0.2 (09/26/2022)

  • fix(Flip): width and height size

Download Details:

Author: kgrandemange

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

Download Link: https://github.com/kgrandemange/vue-flip/archive/master.zip

Official Website: https://github.com/kgrandemange/vue-flip

Install & Download:

# NPM
$ npm install vue-flip --save
Tags:

Add Comment