Pagination

Постраничная навигация. Бесплатно, MIT · Навигация и каркас › Переключение

Установка

npx valyro-cli@latest add pagination

npx shadcn@latest add https://valyro.xyz/r/pagination.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Pagination } from 'valyro-ui';

Prop	Type	Default
`pageCount` *	`number`		Total number of pages; non-finite or lower values count as 1.
`value`	`number`		Current page, 1-based.
`defaultValue`	`number`	`1`	Initial `value` when uncontrolled.
`onValueChange`	`(page: number) => void`		Called with the new `value` when it changes.
`siblings`	`number`	`1`	Page buttons shown on each side of the current page before an ellipsis.
`boundaries`	`number`	`1`	Page buttons always shown at the start and at the end.
`variant`	`'default' \| 'compact'`	`'default'`	`compact` shows "Page 3 of 10" between the arrows instead of page numbers.
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Height of the page buttons: 32 / 40 / 48px, like the other controls' sm / md / lg.
`labels`	`Partial<PaginationLabels>`		Overrides for the built-in English strings.
`locale`	`string`		Locale for page numbers (default: the ThemeProvider's, then the browser's).
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the current-page cursor springs to the chosen page with a slight overshoot. `default`: the theme's curve.