bananajs-is-already-taken / vue3-book-component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue 3 Book Component

Book logo made by Freepik

Distributed under LGPL-3.0-or-later license

Book component for Vue 3. It provides easy, flexible API and great customizability.

  • You can make your book interactive
  • Or create interactive journal
  • Or you just need to do something fast and easy way

Usage

// main.ts

import {createApp} from 'vue';
import BananaVue3BookPlugin from '@bananajs/vue3-book-component';
import '@bananajs/vue3-book-component/BananaVue3Book.css';
import App from './App.vue';

createApp(App).use(BananaVue3BookPlugin).mount('#app');
// App.vue

<template>
  <banana-vue3-book :options="options" :list="list">
      <template #first>
      </template>

      <!-- item of slot data is the same object in list prop -->
      <template #faceFront="{ item }">
      </template>

      <template #faceBack="{ item }">
      </template>

      <template #last>
      </template>
  </banana-vue3-book>
</template>
<script>
  setup() {
    const options = {
      duration: 1500,
      perspective: 1500,
      delay: 1000,
      autoplay: true,
      loop: false,
    };

    const list = [/* your data to show */];

    return { options, list };
  },
</script>

API

Props

Name Type Purpose
options Object Different options for book
list Array Your pages to show

Options object

duration

How fast will work auto flip.

Default: 1500

perspective

Default: 1500

delay

Delay between page turn

Default: 1000

autoplay

Turn on/off auto play

Default: false

loop

Turn on/off loop

Default: false

Slots

Name Data Purpose
first None First item in book
faceFront { item } Face of the page
faceBack { item } Back of the page
last None Last item in book

Contributing

  1. Fork it (https://github.com/bananajs-is-already-taken/vue3-book-component/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes using a semantic commit message.
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Assets

Icons made by Freepik from www.flaticon.com

About

License:GNU Lesser General Public License v3.0


Languages

Language:TypeScript 76.2%Language:JavaScript 13.7%Language:SCSS 10.1%