Awesome
svelte-pagination
Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.
Demo
Installation
npm install svelte-pagination
or
yarn add svelte-pagination
Usage
<script>
import Pagination from "svelte-pagination";
let checkedValue = 1;
function handleChange(e) {
const { selected } = e.detail;
checkedValue = selected;
}
</script>
<Pagination
pageCount={100}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
on:change={handleChange} />
<br />
API
Props
| Prop Name | Description | Default Value |
|---|---|---|
| pageCount | 10 | |
| pageRangeDisplayed | 2 | |
| marginPagesDisplayed | 3 | |
| previousLabel | "Previous" | |
| nextLabel | "Next" | |
| breakLabel | "..." | |
| hrefBuilder | ||
| initialPage | ||
| forcePage | ||
| disableInitialCallback | false | |
| containerClassName | ||
| pageClassName | ||
| pageLinkClassName | ||
| activeClassName | "selected" | |
| activeLinkClassName | ||
| previousClassName | "previous" | |
| nextClassName | "next" | |
| previousLinkClassName | ||
| nextLinkClassName | ||
| disabledClassName | "disabled" | |
| breakClassName | ||
| breakLinkClassName | ||
| extraAriaContext | ||
| ariaLabelBuilder | ||
| startPageIndex | 1 |
Slots
NA
Events
| Event Name | Description | event.detail info |
|---|---|---|
| change | {event: event, selected} |
Examples
Click here to view stories implementation
Credits
TBD
License
MIT