@jill64/svelte-pagination v2.1.15
@jill64/svelte-pagination
š Pagination component for Svelte
Demo
Installation
npm i @jill64/svelte-pagination
Quick Example
<!-- /src/route/[page=int]/+page.svelte -->
<script>
import { PaginateItems } from '@jill64/svelte-pagination'
export let data
$: ({ lastPage } = data)
</script>
<div>
<PaginateItems {lastPage} slug="[page=int]" />
</div>
<style>
div {
/* Your Navigation Box Style */
}
div :global(.paginate-page-link) {
/* Page Link Style */
}
div :global(.paginate-navigation) {
/* Navigation Link Style */
}
div :global(.paginate-rest-indicator) {
/* Rest Indicator (...) Style */
}
div :global(.paginate-current-page) {
/* Current Page Indicator Style */
}
</style>
Key Feature
This component uses SvelteKit route parameters for page management.
This enables SvelteKit features like preloading and prefetching when out of the box.
Therefore, it is necessary to pass the ID of the route parameter that manages the number of pages to the Paginate
component as the slug
property.
Keyboard Navigation
By default, the PaginateItems
component is keyboard navigable.
key | action |
---|---|
ā | Next Page |
ā + ā | Last Page |
ā | Previous Page |
ā + ā | First Page |
This behavior can be disabled by passing disableKeyboardNavigation
prop.
Optional Props
name | default | description |
---|---|---|
sideSize | 2 | Number of pages from start/end page |
centerSize | 3 | Number of pages from current page |
previousLabel | ļ¼ Previous | Previous button label |
nextLabel | Next ļ¼ | Next button label |
firstLabel | ļ¼ļ¼ | First button label |
lastLabel | ļ¼ļ¼ | Last button label |
!NOTE You can always hide that label by setting the value of the label prop to Falsy.
Calculate Last Page
You can also use the included utility functions to calculate the last page.
<!-- /src/route/[page=int]/+page.svelte -->
<script>
import { PaginateItems, calcLastPage } from '@jill64/svelte-pagination'
export let data
$: ({ totalCount } = data)
</script>
<div>
<PaginateItems
lastPage={calcLastPage({
total: totalCount
per: 30 // Count per page
})}
slug="[page=int]"
/>
</div>
Prepared Page Param Matcher
Integer parameter matcher (commonly used for pagination) is available.
// /src/params/int.js
export { int as match } from '@jill64/svelte-pagination'
Migrate from v1
In v2, container elements are now user-managed.
Instead of <Paginate>
, you must use <PaginateItems>
and wrap it with any element.
This allows for more fine-grained styling and manipulation of container elements.
- The
.paginate-container
class is no longer used.
<script>
- import { Paginate } from '@jill64/svelte-pagination'
+ import { PaginateItems } from '@jill64/svelte-pagination'
export let data
$: ({ lastPage } = data)
</script>
+ <div>
- <Paginate {lastPage} slug="[page=int]" />
+ <PaginateItems {lastPage} slug="[page=int]" />
+ </div>
License
10 days ago
26 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago