Patterns
Blog Pagination
A compact controlled page navigator with prev/next and windowed numbered pages.
A compact page navigator for blog listings: previous/next buttons plus a windowed run of numbered pages (with leading/trailing ellipses). It is controlled — the host owns routing through onPageChange.
Import
import { BlogPagination } from "@yuhuanowo/yunui/patterns";
Example
onPageChange is a function, which can't cross the server→client boundary in MDX, so the example is rendered from a small client wrapper that tracks the current page in state.
BlogPagination
...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentPage* | number | — | |
| labels | { previous?: string; next?: string; } | undefined | — | Localized labels; default to English. |
| onPageChange* | (page: number) => void | — | Navigate to a page. The host app owns routing / query-string updates. |
| totalPages* | number | — |