Theme-aware, responsive pagination component.
Change any prop and inspect the server-rendered component immediately.
<Pagination
page="3"
pageSize="3"
total="3"
siblingCount="3"
previousLabel="Pagination"
nextLabel="Pagination"
/>payload.Compare configurations and resize the browser to check responsive behavior.
The default: previous and next with a page counter, and a summary of the range in view.
<Pagination
page="2"
total="137"
siblingCount="3"
previousLabel="Pagination"
nextLabel="Pagination"
/>Page numbers windowed around the current page with ellipsis gaps, so a large set never renders hundreds of buttons.
<Pagination
size="sm"
page="5"
total="200"
variant="numbered"
label="Compact example"
previousLabel="Compact example"
nextLabel="Compact example"
/>siblingCount widens how many pages sit either side of the current one.
<Pagination
size="lg"
page="8"
pageSize="25"
total="900"
variant="numbered"
siblingCount="2"
label="Advanced example"
previousLabel="Advanced example"
nextLabel="Advanced example"
/>Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@changeFires when the component's committed value or selection changes.@previousFires when the component emits the previous event.@nextFires when the component emits the next event.<Pagination
@change='console.log(payload)'
@previous='console.log(payload)'
@next='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"Pagination\"], [data-component=\"Pagination\"]")
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})
if (component) registerOutputHandler(component, "previous", (payload) => {
console.log("previous", payload)
})
if (component) registerOutputHandler(component, "next", (payload) => {
console.log("next", payload)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
color | string | "primary" | No |
size | string | "default" | No |
page | number | 1 | No |
pageSize | number | 10 | No |
total | number | 0 | No |
variant | string | "compact" | No |
siblingCount | number | 1 | No |
showSummary | boolean | true | No |
label | string | "Pagination" | No |
previousLabel | string | "Previous" | No |
nextLabel | string | "Next" | No |
class | string | "" | No |