vue-flip

A component to flip elements.

Demo

Here

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 |