Исходник ↗Песочница ↗

Pagination

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

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

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

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

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

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

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

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

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

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

Хук usePagination

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

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

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

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

Доступность (a11y)

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

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

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

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

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

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

СвойствоОписание
boundaryCountnumber

Кол-во всегда видимых страниц в начале и в конце.

По умолчанию: 1
currentPagenumber

Текущая страница.

По умолчанию: 1
disabledboolean

Блокировка взаимодействия с компонентом.

По умолчанию: -
getPageLabel((isCurrent: boolean) => string)

[a11y] Функция для переопределения и/или локализации метки кнопки страницы.

По умолчанию: -
getRootRefRef<HTMLElement>
По умолчанию: -
navigationButtonsStyle"caption" | "both" | "icon"

Задаёт стиль отображения кнопок навигации.

  • icon – показывать только иконку;
  • caption – показывать только подпись;
  • both – показывать и иконку, и подпись.
По умолчанию: icon
navigationLabelstring

[a11y] Метка для обозначения блока навигации.

По умолчанию: Страницы
navigationLabelComponentElementType<any, keyof IntrinsicElements>

Тип элемента отрисовки блока навигации.

По умолчанию: h2
nextButtonCaptionstring

Декоративный текст для кнопки навигации вперёд.

По умолчанию: Вперёд
nextButtonLabelstring

[a11y] Метка для кнопки навигации вперёд.

По умолчанию: Перейти на следующую страницу
nextButtonTestIdstring

Передает атрибут data-testid для кнопки next.

По умолчанию: -
onChange((page: number, event: MouseEvent<HTMLElement, MouseEvent>) => void)

Обработчик изменения выбранной страницы.

По умолчанию: -
pageButtonTestId((day: PaginationPageType, active: boolean) => string)

Передает атрибут data-testid для кнопок страниц.

По умолчанию: -
prevButtonCaptionstring

Декоративный текст для кнопки навигации назад.

По умолчанию: Назад
prevButtonLabelstring

[a11y] Метка для кнопки навигации назад.

По умолчанию: Перейти на предыдущую страницу
prevButtonTestIdstring

Передает атрибут data-testid для кнопки prev.

По умолчанию: -
renderNavigationButton((props: ButtonProps & { 'data-page': number; 'data-testid': string | undefined; }) => ReactNode) | undefined

Функция для кастомного рендера кнопок навигации prev и next.

По умолчанию: -
renderPageButton((props: TappableOmitProps & { 'data-page': number; }) => ReactNode)

Функция для кастомного рендера кнопок страниц.

По умолчанию: -
siblingCountnumber

Кол-во всегда видимых страниц по краям текущей страницы.

По умолчанию: 1
totalPagesnumber

Общее кол-во страниц.

По умолчанию: 1
Предыдущая
Epic
Следующая
Panel