npm i @velkin/react
import { VuPagination } from "@velkin/react/pagination";| Prop | Type | Default | Description |
|---|---|---|---|
| totalPages | number | 5 | Total number of pages. |
| currentPage | number | 1 | Selected page (1-based). |
| disabledPages | number[] | [] | Page numbers that cannot be selected. |
| loading | boolean | false | Blocks interaction and shows the overlay spinner. |
| progress | boolean | false | Renders a progress track under the controls. |
| layout | VuPaginationLayout | "bar" | `bar` numbered buttons or `menu` page picker. |
| jump | boolean | false | Shows the jump-to-page field when `true` and `totalPages > 1`. |
| size | VuPaginationSize | "md" | Control density (`sm`, `md`, `lg`). |
| radius | VuPaginationRadius | "md" | Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`. |
| maxVisiblePages | number | 5 | Max numbered buttons before ellipsis collapse. |
| label | string | "" | Accessible name for the navigation region. |
| prevLabel | string | "" | Accessible name for the previous-page control. |
| nextLabel | string | "" | Accessible name for the next-page control. |
| jumpLabel | string | "" | Visible label for the jump field (`Page` by default). |
| jumpGoLabel | string | "" | Label for the jump submit control (`Go` by default). |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuPaginationChangeDetail | When `currentPage` changes. |
| Part | Description |
|---|---|
| base | Outer wrapper. |
| overlay | Loading scrim over the controls. |
| spinner | Spinner centered in the overlay. |
| block | Interactive region dimmed while loading. |
| bar | Numbered bar layout container. |
| pages | Row of page buttons and decorative ellipsis markers. |
| ellipsis | Decorative truncated-range marker (`aria-hidden`). |
| prev | Previous-page control. |
| next | Next-page control. |
| page | Numbered page control. |
| jump | Jump-to-page field group. |
| jump-label | Visible label for the jump field. |
| jump-input | Jump-to-page number input. |
| jump-go | Jump submit control. |
| picker | Menu layout container. |
| trigger | Current-page trigger for the picker menu. |
| menu | Popover menu listing all pages. |
| progress | Optional progress track under the controls. |
| fill | Filled portion of the progress track. |
| Method | Description |
|---|---|
| nextPage | - Moves to the next enabled page. |
| prevPage | - Moves to the previous enabled page. |
| setPage | - Moves to a specific enabled page. |
| Name | Definition |
|---|---|
| VuPaginationChangeDetail | |
| VuPaginationLayout | |
| VuPaginationRadius | |
| VuPaginationSize | |