PaginationItems
Компонент PaginationItems отображает список номеров страниц с разделителями-многоточиями. Автоматически получает диапазон страниц из контекста родительской Pagination и рендерит соответствующие кнопки и разделители.
Обзор
- Основное назначение: отображение кликабельных номеров страниц с пропусками.
- Ключевые возможности:
- Автоматическая генерация на основе диапазона из
paginationContext. - Отображение
PaginationDotsдля пропущенных страниц (значение'dots'в диапазоне). - Подсветка активной страницы.
- Поддержка дополнительных пропсов для элементов через
getItemProps. - Поддержка кастомных классов через
classNames. - Атрибут
aria-current="page"для активного элемента.
- Автоматическая генерация на основе диапазона из
API компонента
Inject
| Ключ | Источник | Описание |
|---|---|---|
paginationContext | Pagination | Контекст родительской пагинации. Предоставляет диапазон страниц, активную страницу, состояние блокировки и методы. |
Используемые данные из контекста
| Данные | Тип | Описание |
|---|---|---|
range | Array | Массив номеров страниц и строк 'dots' для разделителей. Пример: [1, 'dots', 4, 5, 6, 'dots', 10]. |
active | Number | Номер текущей активной страницы. |
disabled | Boolean | Состояние блокировки всей пагинации. |
getItemProps | Function | Функция, возвращающая дополнительные пропсы для элемента страницы. |
classNames | Object | Объект с кастомными классами (item, activeItem). |
setPage | Function | Метод для установки активной страницы. |
Логика отображения
- Для каждого элемента массива
range:- Если значение равно
'dots', отображаетсяPaginationDots. - Иначе отображается
PaginationControlс номером страницы.
- Если значение равно
- Активная страница получает проп
active: trueи атрибутaria-current="page". - При клике на номер страницы вызывается
setPage(page).