vue-flipper
A component to flip elements with a nice transition.
-
⚡️ It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB -
🎨 CSS uses Stylus + BEM + Autoprefixer -
📦 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.