Pagination

SPagination is page navigation for large lists. It is built on Reka UI (page calculation from total/itemsPerPage, sibling pages, ellipsis, keyboard control). The buttons are reused SButtons, the arrows are SIcons. The current page is bound with v-model:page.

Basic usage

Edge pages

show-edges always shows the first and last pages with an ellipsis between the blocks — useful for long lists.

Custom arrows

prev-icon and next-icon replace the icons of the "previous"/"next" buttons — they take a registry name or a raw SVG path. Here the chevrons are replaced with arrows.

Sibling pages

sibling-count sets how many pages to show to the left and right of the current one. A larger value shows more page numbers around the active page.

Disabled

disabled blocks the pagination and all its buttons.

API

Props

Name	Type	Default	Description
total*	number	required	Total number of items; the page count is computed from it and itemsPerPage.
items-per-page	number	10	Number of items per page.
sibling-count	number	1	How many sibling pages to show on each side of the current one.
show-edges	boolean	false	Always shows the first and last pages with an ellipsis between the blocks.
disabled	boolean	false	Disables the pagination and all its buttons.
prev-icon	string	"chevron-left"	Icon of the previous page button.
next-icon	string	"chevron-right"	Icon of the next page button.
prev-page-label	string	undefined	Accessible name of the previous page button (taken from the locale dictionary by default).
next-page-label	string	undefined	Accessible name of the next page button (taken from the locale dictionary by default).
page	number	1	Current page (1-based). Two-way binding via v-model:page.

Events

Name	Signature	Description
update:page	(value: number) => void	Emitted when page changes. Used for two-way binding (v-model:page).