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
tsx
1import { 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. |
| labels | { previous?: string; next?: string; page?: ((page: number) => string) | undefined; } | undefined | — | Every string the control announces. Matches `BlogPagination.labels`. |
| onPageChange* | (page: number) => void | — | Called with the requested page when a control is activated. |
| page* | number | — | The active page (1-based). |
| 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. |