https://github.com/thecodejack/svelte-pagination
https://github.com/thecodejack/svelte-pagination
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/thecodejack/svelte-pagination
- Owner: thecodejack
- Created: 2020-07-27T15:23:08.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-10T13:50:36.000Z (over 1 year ago)
- Last Synced: 2024-10-11T12:49:18.847Z (over 1 year ago)
- Language: Svelte
- Size: 356 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-pagination
[](https://www.npmjs.com/package/svelte-pagination)
[](https://www.npmjs.com/package/svelte-pagination)
Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.
## Demo
[Click here for Storybook link](https://svelte-pagination.netlify.app/)
[REPL Link](https://svelte.dev/repl/20e93c193d6d4a9e922465f684fb1539)
## Installation
```
npm install svelte-pagination
or
yarn add svelte-pagination
```
## Usage
```
import Pagination from "svelte-pagination";
let checkedValue = 1;
function handleChange(e) {
const { selected } = e.detail;
checkedValue = selected;
}
```
## 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](https://github.com/thecodejack/svelte-pagination/tree/master/stories/views) to view stories implementation
## Credits
TBD
## License
MIT