vue-flipper
Version:
A component to flip elements with a nice transition.
129 lines (93 loc) • 3.11 kB
Markdown
# vue-flipper
A component to flip elements with a nice transition.
<p align="center">
<img
src="https://media.giphy.com/media/XKSCnlDkjbaXEkSODW/giphy.gif"
alt="vue-flipper GIF"
title="A GIF shows VueFlipper example."
/>
</p>
- :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](https://codepen.io/VitorLuizC/pen/GPJEEN) or [CodeSandbox](https://codesandbox.io/s/m7lowxvwm9).
## Installation
This library is published in the NPM registry and can be installed using any compatible package manager.
```sh
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.
```vue
<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.
```js
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.
```html
<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](./LICENSE).