- Create a flipping book from html content.
- Support horizontal or vertial layout.
<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 |
MIT