Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.
npm install svelte-pagination or yarn add svelte-pagination <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 /> | 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 |
NA
| Event Name | Description | event.detail info |
|---|---|---|
| change | {event: event, selected} |
Click here to view stories implementation
TBD
MIT