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.