vue-bookblock-directive

vue-bookblock

A lightweight directive for booklet-like component using codrops/BookBlock

Live Demo

Installation

NPM

npm install vue-bookblock

Setup

import Vue from 'vue'
import bookblock from 'vue-bookblock'

Vue.use(bookblock)

in template : 
  book-wrapper(class="bb-bookblock" ,
                id='bb-book'
                v-bookblock="options" 
                ref="bookBlock"
                )  
  .bb-item
        //book-page
        .review
          p page1 left side
        .review
          p page1 right side
  a.btn.btn--prev.mdi.mdi-chevron-left(id="bb-nav-prev" 
                                          @click="bookblock.prev()"
                                          ) 
  a.btn.btn--next.A.mdi.mdi-chevron-right(id="bb-nav-next" 
                                          @click="bookblock.next()")              

in vue script: data() { return { options: { speed: 500, hasCover: false, nextEl: '#bb-nav-next', prevEl: '#bb-nav-prev', startPage: 1, onEndFlip: (old, page) => { console.log(page)

    }
  }
}

}

Options

{
  // page to start on
  startPage: 1,

  // vertical or horizontal flip
  orientation: 'vertical',

  // ltr (left to right) or rtl (right to left)
  direction: 'ltr',

  // speed for the flip transition in ms
  speed: 1000,

  // easing for the flip transition
  easing: 'ease-in-out',

  // if set to true, both the flipping page and the sides will have an overlay to simulate shadows
  shadows: true,

  // opacity value for the "shadow" on both sides (when the flipping page is over it)
  // value : 0.1 - 1
  shadowSides: 0.2,

  // opacity value for the "shadow" on the flipping page (while it is flipping)
  // value : 0.1 - 1
  shadowFlip: 0.1,

  // if we should show the first item after reaching the end
  circular: false,

  // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´
  nextEl: '',

  // if we want to specify a selector that triggers the prev() function
  prevEl: '',

  // autoplay. If true it overwrites the circular option to true
  autoplay: false,

  // hasCover. If true the first item will become cover and be centered
  hasCover: true,

  // page selector using upon initialize
  itemSelector: '.bb-item',

  // time (ms) between page switch, if autoplay is true
  interval: 3000,

  // 3d perspective
  perspective: 1200,

  // callback after the flip transition
  // old is the index of the previous item
  // page is the current item´s index
  // isLimit is true if the current page is the last one (or the first one)
  onEndFlip: function (old, page, isLimit) {
    return false;
  },

  // callback before the flip transition
  // page is the current item´s index
  onBeforeFlip: function (page) {
    return false;
  }
}

Contributing

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev

Inspired by vue-sortable

For detailed explanation on how things work, checkout the guide and docs for vue-loader.