Компонент PaginationControl — это базовая кнопка управления для пагинации. Используется для отображения номеров страниц и навигационных кнопок («вперёд», «назад», «первая», «последняя»). Поддерживает активное и заблокированное состояния.
- Основное назначение: универсальная кнопка для элементов пагинации.
- Ключевые возможности:
- Активное состояние с цветовым выделением.
- Заблокированное состояние с визуальными индикаторами.
- Возможность заменить корневой тег через
component. - Интеграция с контекстом
paginationContext для получения классов. - Атрибуты
data-active и data-disabled для CSS-селекторов.
| Проп | Тип | По умолчанию | Описание |
|---|
component | String | Object | 'button' | Позволяет заменить корневой HTML-тег или передать компонент. |
active | Boolean | false | Если true, кнопка отображается в активном состоянии (текущая страница). |
disabled | Boolean | false | Блокирует кнопку. |
className | String | | Дополнительные CSS-классы. |
| Ключ | Источник | Описание |
|---|
paginationContext | Pagination | Контекст родительской пагинации. Используется для получения кастомных классов. |
- Применяются классы цветовой темы
this:primary. - Фон:
bg-this (основной цвет темы). - Текст:
text-white. - В тёмной теме:
dark:bg-this-light. - Заблокированная активная кнопка: сниженная непрозрачность,
cursor-not-allowed.
- При наведении: серый фон (
hover:bg-gray-300). - При фокусе: серый фон (
focus-visible:bg-gray-300). - При нажатии: полупрозрачный серый фон (
active:bg-gray-300/80).
- Курсор:
cursor-not-allowed. - Непрозрачность:
opacity-60.
| Атрибут | Условие | Значение |
|---|
data-active | active: true | true |
data-disabled | disabled: true | true |
