1.0.16 • Published 2 years ago
@snappywc/pagination v1.0.16
<snappy-pagination>
An easy-to use pagination element. (1 kb)
Installation
Option 1: As a package.
npm i @snappywc/pagination
import '@snappywc/pagination'
Option 2: In your markup.
<script type="module">
import '//unpkg.com/@snappywc/pagination'
</script>
Usage
HTML
<snappy-pagination></snappy-pagination>
JavaScript
// 1: Create a function that will run when the page changes.
const fetchPhotos = (page) => {
fetch(`https://picsum.photos/v2/list?page=${page}&limit=20`)
.then((res) => res.json())
.then((photos) => renderPhotos(photos));
};
// 2: Query your <snappy-pagination> element.
const pagination = document.querySelector("snappy-pagination");
// 3: Run the setup function with the desired options
pagination.setup({
total: 50, // Number of pages available
spread: 2, // Number of pages to show left/right of current page
})
// 4: Listen for the component's `page-changed` event
pagination.addEventListener("page-changed", (e) => {
// 4.1 pass e.detail.page to your function
fetchPhotos(e.detail.page);
});
fetchPhotos(1);
Customization
The default styles and part selectors for this element were carefully considered to be as minimal and un-opinionated as possible.
Parts
The following parts are available for styling.
name | description |
---|---|
page | each numbered page button |
current-page | the current page's button |
prev | the previous page button |
next | the next page button |
Example CSS
snappy-pagination::part(page) {
color: red;
font-weight: bold;
}
Slots
The following slots are available to customize the element's markup.
name | description | default |
---|---|---|
prev | the previous button's content | ❮ |
next | the next button's content | ❯ |
ellipsis | shown between pages | ... |
Example HTML
<snappy-pagination total="50" range="2">
<svg slot="prev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
</svg>
<svg slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</snappy-pagination>