- Create a flipping book from html content.
- Support horizontal or vertial layout.
npm install @9am/flipr<ol id="content"> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> <li>4444444444</li> </ol>import Flipr from '@9am/flipr'; import '@9am/flipr/style.css'; const flipr = new Flipr({ /* FliprOptions */ w: 600, h: 400, content: document.querySelector('#content'), tHint: 'tr', }); // append dom document.body.appendChild(flipr.dom);| Name | Type | Default | Description |
|---|---|---|---|
w | number | required* | book width |
h | number | required* | book height |
content | HTMLElement | required* | the content element whose children will be used to render book |
ph | number | 0 | book padding horizontal |
pv | number | 0 | book padding vertical |
align | 'horizontal' | 'vertical' | 'horizontal' | book layout |
pageNum | number | 0 | default page num |
tSize | number | 100 | trigger area size |
tHint | 'tl' | 'tr' | 'bl' | 'br' | '' | '' | show hint trigger area before user interaction |
tHintInterval | number | 1000 | hint animation interval in ms |
| Name | Type | Default | Description |
|---|---|---|---|
--flipr-padding | css <padding> | 20px | page padding |
--flipr-bg | css <background> | white | page background |