1 viewer
Component · Navigation
Pager
Previous / next links for a paged list. `href` is a template whose `{page}` becomes each link's page number. Renders nothing for a single page.
- Category
- Navigation
- Slots
- 4
- States
- 0
- Writer
- Shared
Preview
<Pager hasNext={true} href={"/view/components?page={page}"} page={2} />Change this declaration and watch it render:open Pager in the playground
Props
The inputs the shared writer reads. `data-*` and `aria-*` attributes pass through and are not listed.
| Prop | Type | Required | Default | Also written |
|---|---|---|---|---|
| hasNext | bool | Optional | false | has_next |
| href | text | Optional | ?page={page} | — |
| id | text | Optional | — | — |
| page | number | Optional | 1 | — |
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .cre8-pager |
| prev | .cre8-pager__prev |
| page | .cre8-pager__page |
| next | .cre8-pager__next |
- Role
- navigation
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-navigation | ready |
| terminal | terminal-text | planned |
Accessibility
A labelled navigation landmark with plain previous and next links.
- The nav carries aria-label="Pages".
- Links carry rel="prev" / rel="next" and visible words, not arrows alone.
- The current page number is stated in text between the links.