Pagination — Loidolt Theme

import { Pagination } from '@loidolt/theme-svelte';

Example

Showing page 4 of 25

count is the number of items, not the number of pages.
The ellipsis is aria-hidden: read between page numbers it is noise, and the buttons either side already say where the trail jumps.

Generated from the component source, so it cannot drift from the implementation.

Pagination props
Prop	Type	Default	Notes
`count` required	`number`	`—`	Total number of items being paged through — not the number of pages.
`class`	`string`	`—`
`label`	`string`	`'Pagination'`	Accessible name of the landmark.
`nextLabel`	`string`	`'Next'`
`onPageChange`	`(page: number) => void`	`—`
`page` bindable	`number`	`1`	1-based current page.
`pageLabel`	`(page: number) => string`	(value: number) => `Page ${value}`	Accessible name for a page button, e.g. `(page) =>` Page ${page}.
`perPage`	`number`	`10`
`previousLabel`	`string`	`'Previous'`
`ref` bindable	`HTMLElement \| null`	`null`
`siblingCount`	`number`	`1`	Pages kept either side of the current one before the trail turns into an ellipsis.

Plus the attributes of Omit<HTMLAttributes<HTMLElement>, 'children'>, forwarded to the root element.