---
description: Компонент для навигации по страницам с поддержкой сложных сценариев отображения.
tags: search
---
# Pagination [tag:component]
Компонент для навигации по страницам с поддержкой сложных сценариев отображения.
Особое внимание уделено цифровой доступности и гибкой кастомизации.
{/* @example-description: Базовый компонент `Pagination` с текущей страницей и общим количеством страниц. */}
```jsx
```
## Стиль кнопок навигации
Задается свойством `navigationButtonsStyle`:
{/* @example-description: Сравнение стилей кнопок навигации: `icon`, `caption` и `both`. */}
```jsx
```
## Кастомизация элементов
С помощью свойств `renderPageButton` и `renderNavigationButton` можно отрисовать кастомные кнопки навигации и кнопки перехода по страницам.
- В `renderPageButton` прокидывается объект с пропсами типа `CustomPaginationPageButtonProps` - наследует API [`Tappable`](/components/tappable).
- в `renderNavigationButton` прокидывается объект с пропсами типа `CustomPaginationNavigationButton` наследует API [`Button`](/components/button).
В примере ниже мы задаём пользовательские кнопки навигации и даём возможность показать всплывающую подсказку
при наведении на конкретную страницу:
{/* @example-description: Кастомные кнопки пагинации через `renderPageButton` и `renderNavigationButton`. */}
```jsx
const [currentPage, setCurrentPage] = React.useState(5);
return (
(
)}
renderNavigationButton={(props) => }
currentPage={currentPage}
totalPages={10}
/>
);
```
## Хук usePagination [#use-pagination]
Для полного контроля над отображением используйте хук:
{/* @example-description: Использование `usePagination` для ручного рендера элементов пагинации. */}
```jsx
const items = usePagination({
totalPages: 10,
currentPage: 5,
});
// items → [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
return (
);
```
### Когда использовать хук
- Нестандартный UI пагинации.
- Интеграция с кастомной логикой.
- Сложные анимации переходов.
## Доступность (a11y) [#a11y]
Компонент использует `