vue3-flipbook
vue3-flipbook
is a Vue component that displays images in 3D page flip effect.
Installation
Install as a module:
npm i -S vue3-flipbook
or
yarn add vue3-flipbook
or
pnpm add vue3-flipbook
Or include in html:
## Usage ```html
<template>
<flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
</template>
<style>
.flipbook {
width: 90vw;
height: 90vh;
}
</style>
If installed as a module, with Vue 3.x,
<script>
import Flipbook from 'vue3-flipbook'
export default {
components: { Flipbook }
}
</script>
CSS API
You may need to specify the size of view port in your style sheet, directly to <flipbook>
element, or to .viewport
sub-element of flipbook.
If the size is horizontally long and singlePage
prop is false
(default), it displays two pages spread, suitable for desktop browsers. If it's vertically long, it displays single pages, suitable for smartphones.
There are some internal classes.
.viewport
A <div>
element that contains everything but <slot>
. <slot>
is placed above .viewport
.
.bounding-box
Approximate bounding box of the displayed images. Suitable to give box-shadow
.
Browser support
Supports modern browsers and IE 11.
Development
To start development server with demo pages:
cd examples/demo
pnpm i
pnpm serve
To package for npm:
pnpm dist
Credits
- vivekKodira: README correction
- siderisng:
dragToFlip
- MaikoTan: TypeScript support
License
MIT
quote https://ts1.github.io/flipbook-vue/ Takeshi Sone.