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

``vue

`

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

Usage

Use this template:

`vue




`

You can active the flip on the click with:

`vue

`

or you can active on the hover with:

`vue

`

or you can bind with a variable:

`vue

`

`vue
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 |