vue-flipper

A component to flip elements with a nice transition.

• :zap: It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB

• :art: CSS uses Stylus + BEM + Autoprefixer

• :package: There are ESM, CommonJS and UMD distributions

You can se by youself on Codepen or CodeSandbox.

Installation

This library is published in the NPM registry and can be installed using any compatible package manager.

npm install vue-flipper --save

# For Yarn, use the command below.
yarn add vue-flipper

Usage

Just import Flipper component from 'vue-flipper' and use it like any other Vue component.

<template>
  <flipper
    width="270px"
    height="300px"
    :flipped="flipped"
    @click="onClick"
  >
    <div slot="front">Frontface</div>

    <div slot="back">Backface</div>
  </flipper>
</template>

<script>
import Flipper from 'vue-flipper';

export default {
  components: { Flipper },
  data () {
    return {
      flipped: false
    };
  },
  methods: {
    onClick () {
      this.flipped = !this.flipped;
    }
  }
};
</script>

<style src="vue-flipper/dist/vue-flipper.css" />

Usage as global component

If you need <flipper /> available everywhere, you can register it as a global component.

And don't forget to import its CSS.

import 'vue-flipper/dist/vue-flipper.css';
import Vue from 'vue';
import Flipper from 'vue-flipper';

Vue.component('flipper', Flipper);

Usage from CDN

vue-flipper has an UMD bundle and CSS available through JSDelivr and Unpkg CDNs.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-flipper/dist/vue-flipper.css" />

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-flipper"></script>

<script>
  /**
   * vue-flipper is available through VueFlipper.
   */
  console.dir(VueFlipper);

  /**
   * Vue.use will add flipper as global component.
   */
  Vue.component('flipper', VueFlipper);
</script>

Props

| Name | Description | Type | Default |:---- |:----------- |:---- |:------- | flipped | If true flips to backface, otherwise to frontface. | Boolean | false | width | Component's width. | CSSLength (String) | '100%' | height | Component's height. | CSSLength (String) | '100%' | duration | Component's transition duration. | CSSTime (String) | '0.5s' | transition | Component's transition timing function. | CSSTransitionFunction (String) | 'ease-in'

Events

Flipper component pass up every HTMLElement event. So, you can use @click, @mouseover etc.

License

Released under MIT License.