Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-flipbook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-flipbook

vue3-flipbook is a Vue component that displays images in 3D page flip effect.

Storybook

Installation

Install as a module:

npm i -S vue3-flipbook

yarn add vue3-flipbook

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.