Book reading is a very common UI effect to provide different browsing experience for users. With <msc-ez-catalog />, developers could adopt this feature to web page easier. All developers need to do is just providing series image paths in config and everything will be all set.
<msc-ez-catalog /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ez-catalog />'s html structure and everything will be all set.
- Required Script
<script
type="module"
src="https://your-domain/wc-msc-ez-catalog.js">
</script>- Structure
Put <msc-ez-catalog /> into HTML document. It will have different functions and looks with attribute mutation.
<msc-ez-catalog>
<script type="application/json">
{
"pages": [
"your_image_path_0.jpg",
"your_image_path_1.jpg",
"your_image_path_2.jpg",
"your_image_path_3.jpg",
...
]
}
</script>
</msc-ez-catalog><msc-ez-catalog /> could also use JavaScript to create DOM element. Here comes some examples.
<script type="module">
import { MscEzCatalog } from 'https://your-domain/wc-msc-ez-catalog.js';
const pages = [
"your_image_path_0.jpg",
"your_image_path_1.jpg",
"your_image_path_2.jpg",
"your_image_path_3.jpg"
];
// use DOM api
const nodeA = document.createElement('msc-ez-catalog');
document.body.appendChild(nodeA);
nodeA.pages = pages;
// new instance with Class
const nodeB = new MscEzCatalog();
document.body.appendChild(nodeB);
nodeB.pages = pages;
// new instance with Class & default config
const nodeC = new MscEzCatalog({ pages });
document.body.appendChild(nodeC);
</script>Developers could apply styles to decorate <msc-ez-catalog />'s looking.
<style>
msc-ez-catalog {
--msc-ez-cataloag-duration: 750ms;
--msc-ez-cataloag-border-radius: 8px;
}
</style><msc-ez-catalog /> supports some attributes to let it become more convenience & useful.
- pages
Set pages' image path for <msc-ez-catalog />. Once setting, <msc-ez-catalog /> will re-render all pages.（pages should be array and has more than 4 children）
<msc-ez-catalog
pages='["your_image_path_0.jpg","your_image_path_1.jpg","your_image_path_2.jpg","your_image_path_3.jpg"]'
>
...
</msc-ez-catalog>| Key | Description |
|---|---|
| ← | Go to previous flip. |
| → | Go to next flip. |
| f | Toggle fullscreen.（same as double click <msc-ez-catalog />） |
| Method Signature | Description |
|---|---|
| prev() | Go to previous flip. |
| next() | Go to next flip. |
| seekTo(index = 1) | Switch to flip index. index will be correct to flip count once more than flip count. |
| Property Name | Type | Description |
|---|---|---|
| pages | Array | Getter / Setter for pages' image path. |
| currentflip | Number | Getter for current flip. |
| flipcount | Number | Getter for flipcount. |
| Event Signature | Description |
|---|---|
| msc-ez-catalog-flip | Fired when flip occured. Developers can gather pages' information through event.detail. |