Pagination

Компонент для навигации по страницам с поддержкой сложных сценариев отображения. Особое внимание уделено цифровой доступности и гибкой кастомизации.

Загружается...

Стиль кнопок навигации

Задается свойством navigationButtonsStyle:

Загружается...

Кастомизация элементов

С помощью свойств renderPageButton и renderNavigationButton можно отрисовать кастомные кнопки навигации и кнопки перехода по страницам.

В renderPageButton прокидывается объект с пропсами типа CustomPaginationPageButtonProps - наследует API Tappable.
в renderNavigationButton прокидывается объект с пропсами типа CustomPaginationNavigationButton наследует API Button.

В примере ниже мы задаём пользовательские кнопки навигации и даём возможность показать всплывающую подсказку при наведении на конкретную страницу:

Загружается...

Хук usePagination

Для полного контроля над отображением используйте хук:

Загружается...

Когда использовать хук

Нестандартный UI пагинации.
Интеграция с кастомной логикой.
Сложные анимации переходов.

Компонент использует <nav role="navigation"> и связывает элементы через aria-labelledby, поддерживая семантику навигации.

Дополнительно убедитесь, что:

заданы уникальные метки, если на странице несколько компонентов:

// ❌ Плохо (дублирующиеся метки)
<Pagination navigationLabel="Страницы" />
<Pagination navigationLabel="Страницы" />
 
// ✅ Хорошо
<Pagination navigationLabel="Страницы статей" />
<Pagination navigationLabel="Страницы комментариев" />

в navigationLabel не используется слова “Навигация” или слова близких по значению, так как скринридер и так зачитывает это видя тег nav или role="navigation". Лучше ограничиться чем-то вроде “Страницы”.

Свойства и методы

Pagination

Свойство	Описание
`boundaryCount`	`number` Кол-во всегда видимых страниц в начале и в конце. По умолчанию: `1`
`currentPage`	`number` Текущая страница. По умолчанию: `1`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. По умолчанию: `-`
`getPageLabel`	`((isCurrent: boolean) => string)` [a11y] Функция для переопределения и/или локализации метки кнопки страницы. Note: По возможности лучше не использовать, так как компонент и так проставляет номер страницы в разметку, что достаточно для пользователей скринридеров. Дополнительная информация скорее будет избыточна, так как будет зачитываться для каждой кнопки при перемещении по списку. По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`navigationButtonsStyle`	`"caption" \| "both" \| "icon"` Задаёт стиль отображения кнопок навигации. `icon` – показывать только иконку; `caption` – показывать только подпись; `both` – показывать и иконку, и подпись. По умолчанию: `icon`
`navigationLabel`	`string` [a11y] Метка для обозначения блока навигации. По умолчанию: `Страницы`
`navigationLabelComponent`	`ElementType<any, keyof IntrinsicElements>` Тип элемента отрисовки блока навигации. По умолчанию: `h2`
`nextButtonCaption`	`string` Декоративный текст для кнопки навигации вперёд. Note: Экранные дикторы будут использовать `nextButtonLabel`. По умолчанию: `Вперёд`
`nextButtonLabel`	`string` [a11y] Метка для кнопки навигации вперёд. По умолчанию: `Перейти на следующую страницу`
`nextButtonTestId`	`string` Передает атрибут `data-testid` для кнопки `next`. По умолчанию: `-`
`onChange`	`((page: number, event: MouseEvent<HTMLElement, MouseEvent>) => void)` Обработчик изменения выбранной страницы. По умолчанию: `-`
`pageButtonTestId`	`((day: PaginationPageType, active: boolean) => string)` Передает атрибут `data-testid` для кнопок страниц. По умолчанию: `-`
`prevButtonCaption`	`string` Декоративный текст для кнопки навигации назад. Note: Экранные дикторы будут использовать `prevButtonLabel`. По умолчанию: `Назад`
`prevButtonLabel`	`string` [a11y] Метка для кнопки навигации назад. По умолчанию: `Перейти на предыдущую страницу`
`prevButtonTestId`	`string` Передает атрибут `data-testid` для кнопки `prev`. По умолчанию: `-`
`renderNavigationButton`	`((props: ButtonProps & { 'data-page': number; 'data-testid': string \| undefined; }) => ReactNode) \| undefined` Функция для кастомного рендера кнопок навигации `prev` и `next`. Note: `CustomPaginationNavigationButton` наследует API Button ↗. По умолчанию: `-`
`renderPageButton`	`((props: TappableOmitProps & { 'data-page': number; }) => ReactNode)` Функция для кастомного рендера кнопок страниц. Note: `CustomPaginationPageButtonProps` наследует API Tappable ↗. По умолчанию: `-`
`siblingCount`	`number` Кол-во всегда видимых страниц по краям текущей страницы. По умолчанию: `1`
`totalPages`	`number` Общее кол-во страниц. По умолчанию: `1`

usePagination

Свойство	Описание
`boundaryCount`	`number` Кол-во всегда видимых страниц в начале и в конце. По умолчанию: `1`
`currentPage`	`number` Текущая страница. По умолчанию: `1`
`siblingCount`	`number` Кол-во всегда видимых страниц по краям текущей страницы. По умолчанию: `1`
`totalPages`	`number` Общее кол-во страниц. По умолчанию: `1`

Epic

Panel