Navigation
Pagination
A controlled page navigator with prev/next arrows and ellipsis truncation.
A controlled page navigator. It renders previous/next arrows plus numbered page buttons with automatic ellipsis truncation — the first and last pages always stay visible, and siblingCount neighbours surround the current page. The host owns page state and routing: pass the current page and totalPages, and update on onPageChange. Renders nothing when totalPages <= 1.
Import
import { Pagination } from "@yuhuanowo/yunui";
Basic
Pagination is controlled, so wire page/onPageChange to your own state (or router):
Pagination
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ariaLabel | string | Pagination | Accessible name for the wrapping nav landmark. |
| nextLabel | string | Go to next page | Accessible label for the next-page button. |
| onPageChange* | (page: number) => void | — | Called with the requested page when a control is activated. |
| page* | number | — | The active page (1-based). |
| previousLabel | string | Go to previous page | Accessible label for the previous-page button. |
| siblingCount | number | 1 | How many page buttons to show on each side of the current page before collapsing into an ellipsis. |
| totalPages* | number | — | Total number of pages. |