Pagination

Компонент Pagination используется для навигации по страницам. Предоставляет контекст дочерним элементам (PaginationItems, PaginationPrevious, PaginationNext и др.) и автоматически рассчитывает диапазон отображаемых страниц с учётом граничных и соседних элементов.

Обзор

Основное назначение: постраничная навигация для таблиц, списков и других данных.
Ключевые возможности:
- Автоматический расчёт диапазона страниц с пропусками (многоточиями).
- Контролируемый (value) и неконтролируемый (defaultValue) режимы.
- Настройка количества видимых соседних и граничных страниц.
- Методы для перехода: следующая, предыдущая, первая, последняя страница.
- Блокировка всей пагинации через disabled.
- Предоставление контекста paginationContext дочерним компонентам.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`total`	`Number`	(обязательный)	Общее количество страниц.
`value`	`Number`		Текущая активная страница в контролируемом режиме.
`defaultValue`	`Number`	`1`	Начальная страница в неконтролируемом режиме.
`disabled`	`Boolean`	`false`	Блокирует всю пагинацию.
`siblings`	`Number`	`1`	Количество отображаемых страниц слева и справа от текущей.
`boundaries`	`Number`	`1`	Количество отображаемых страниц в начале и в конце диапазона.
`getItemProps`	`Function`		Функция, возвращающая дополнительные пропсы для элемента страницы.
`className`	`String`		Дополнительные CSS-классы для корневого элемента.
`classNames`	`Object`		Объект для кастомизации внутренних классов дочерних компонентов.

События

Событие	Параметр	Описание
`update:value`	`Number`	Вызывается при изменении активной страницы.
`nextPage`	`Event`	Вызывается при переходе на следующую страницу.
`previousPage`	`Event`	Вызывается при переходе на предыдущую страницу.
`firstPage`	`Event`	Вызывается при переходе на первую страницу.
`lastPage`	`Event`	Вызывается при переходе на последнюю страницу.

Provide

Предоставляет объект paginationContext со следующими свойствами:

Свойство	Тип	Описание
`total`	`Function`	Возвращает общее количество страниц.
`range`	`Function`	Возвращает массив диапазона страниц.
`active`	`Function`	Возвращает номер текущей активной страницы.
`disabled`	`Function`	Возвращает состояние блокировки.
`getItemProps`	`Function`	Возвращает функцию для получения дополнительных пропсов элемента.
`setPage`	`Function`	Устанавливает указанную страницу активной.
`next`	`Function`	Переход на следующую страницу.
`previous`	`Function`	Переход на предыдущую страницу.
`first`	`Function`	Переход на первую страницу.
`last`	`Function`	Переход на последнюю страницу.
`classNames`	`Function`	Возвращает объект с классами для дочерних компонентов.

Логика диапазона страниц

Функция getPaginationRange рассчитывает, какие номера страниц отображать:

boundaries: сколько страниц показывать в начале (1, 2, ...) и в конце (..., 9, 10).
siblings: сколько страниц показывать слева и справа от текущей активной страницы.
Многоточие: между группами отображается -1 (обычно рендерится как ...).

Пример диапазона

При total: 10, activePage: 5, siblings: 1, boundaries: 1: