Pagination
Windowed page navigator.
A page navigator with Prev/Next controls and a windowed list of page numbers: it always shows the first and last page plus `siblingCount` pages around the current one, bridging hidden runs with `…`. Give it a `pageCount`, or a `total` item count with `pageSize` to derive the count. `page` is bindable (1-based); the current page is `aria-current="page"`, visually active and inert. Mono numerals, zero radius, `--ss-line` hairlines.
Demo
Usage
<script>
import { Pagination } from 'dssoca'
let page = $state(1)
</script>
<Pagination bind:page total={240} pageSize={20} onchange={(p) => load(p)} />
<Pagination bind:page pageCount={20} siblingCount={2} />Renders a `<nav aria-label="Pagination">` of buttons. Prev is disabled on page 1, Next on the last page; the current page button carries `aria-current="page"` and never re-fires. Ellipses are decorative (`aria-hidden`).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
page | number | 1 | Current page, 1-based (bindable). |
total | number | — | Total item count; combined with `pageSize` to derive the page count. |
pageCount | number | — | Explicit page count; overrides the `total`/`pageSize` computation. |
pageSize | number | 10 | Items per page when deriving the count from `total`. |
siblingCount | number | 1 | Page-number buttons shown on each side of the current page. |
disabled | boolean | false | Disable the whole control (every button is inert). |
onchange | (page: number) => void | — | Fired when the page changes (after `page` updates). |
size | 'sm' | 'md' | 'lg' | — | Per-instance size override; inherits the ancestor `data-size-variant` when unset. |