flipbook-vue
is a Vue component that displays images in 3D page flip effect.
Demo page is here.
Install as a module:
npm i -S flipbook-vue
or
yarn add flipbook-vue
Or include in html:
<script src="https://unpkg.com/flipbook-vue"></script>
<template>
<flipbook class="flipbook" :pages="['array', 'of', 'image', 'URLs']"></flipbook>
</template>
<style>
.flipbook {
width: 90vw;
height: 90vh;
}
</style>
If installed as a module,
<script>
import Flipbook from 'flipbook-vue'
export default {
components: { Flipbook }
}
</script>
If you would like to build from .vue
directly (including CoffeeScript transpile, etc),
import Flipbook from 'flipbook-vue/sfc'
or
import Flipbook from 'flipbook-vue/src/Flipbook.vue'
Array of image URLs. Required. All images should have the same aspect ratio.
If the first element is null
, the next element is displayed alone (as the cover page).
All other props are optional.
Array of high resolution versions of image URLs. They are used when zoomed.
Duration of page flipping animation in milliseconds. Defaults to 1000.
Duration of zoom in/out animation in milliseconds. Defaults to 500.
Array of possible magnifications.
null
is equivalent to [1]
(no zoom).
Defaults to [1, 2, 4]
.
Intensity of ambient light in 0 to 1. Smaller value gives more shades. Defaults to 0.4.
Intensity of specular light in 0 to 1. Higher value gives more gloss. Defaults to 0.6.
Z-axis distance in pixels between the screen and the viewer. Higher value gives less effect. Defaults to 2400.
How many rectangles a single page is horizontally splitted into. Higher value gives higher quality rendering in exchange for performance. Defaults to 10.
Force single page mode regardless of viewport size. Deafults to false.
Fired when flip to left animation starts. Argument is page number before flip.
Fired when flip to left animation ends. Argument is page number after flip.
Fired when flip to right animation starts. Argument is page number before flip.
Fired when flip to right animation ends. Argument is page number after flip.
This component exposes some properties and methods as slot properties. Example usage:
<flipbook :pages="pages" v-slot="flipbook">
<button @click="flipbook.flipLeft">Previous Page</button>
<button @click="flipbook.flipRight">Next Page</button>
</flipbook>
For more practical usage, refer to src/App.vue
(the demo page source).
These properties and methods can also be referred through $refs
to the flipbook
component.
True if it can flip to previous page.
True if it can flip to next page.
True if it can zoom in.
True if it can zoom out.
Current page number (1 to numPages
).
Total number of pages.
Method to flip to previous page.
Method to flip to next page.
Method to zoom in.
Method to zoom out.
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.
Server-side rendering is not supported. Configure this component rendered only on client-side. See this issue.
To start development server with demo pages:
yarn
yarn serve
To package for npm:
yarn dist
MIT
Copyright © 2019 Takeshi Sone.