3.0.2 • Published 2 years ago

vue-flip v3.0.2

Weekly downloads
781
License
-
Repository
-
Last release
2 years ago

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

DescriptionTypeRequiredDefault Value
active-clickflip on clickBooleanfalsefalse
active-hoverflip on hoverBooleanfalsefalse  
heightcomponent heightStringtrue
widthcomponent withStringtrue
transitioncomponent transitionStringfalse0.5s
v-modelbind flip with variableBooleanfalse
horizontalswitch to horizontal flipBooleanfalsefalse
3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.2.0

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.0

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago