vue3-flipbook
is a Vue component that displays images in 3D page flip effect.
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>
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.
A <div>
element that contains everything but <slot>
. <slot>
is placed above .viewport
.
Approximate bounding box of the displayed images. Suitable to give box-shadow
.
Supports modern browsers and IE 11.
To start development server with demo pages:
cd examples/demo
pnpm i
pnpm serve
To package for npm:
pnpm dist
- vivekKodira: README correction
- siderisng:
dragToFlip
- MaikoTan: TypeScript support
MIT
quote https://ts1.github.io/flipbook-vue/ Takeshi Sone.