Пропсы корня
| Проп | Тип | По умолчанию |
|---|---|---|
active | number | — |
| Контролируемый активный индекс. | ||
defaultActive | number | 0 |
| Неконтролируемый начальный активный индекс. | ||
onChangeActive | (value: number) => void | — |
| Колбэк, вызываемый, когда пользователь выбирает другую страницу. Получает новый индекс в виде числа. | ||
ref | Ref<HTMLUListElement> | — |
Ref, передаваемый на нижележащий элемент <ul>. | ||
size | PageControlSize | 'md' |
| Определяет размер элементов индикатора страниц. | ||
Также принимает все атрибуты <ul>.
Дочерние части
PageControlItem: стандартный элемент-точка.PageControlProgress: анимированный элемент в виде прогресса.
PageControlItem
| Проп | Тип | По умолчанию |
|---|---|---|
indexобязательный | number | — |
| Индекс элемента страницы (с нуля). Используется для идентификации и сравнения с активным индексом из контекста. | ||
ref | Ref<HTMLButtonElement> | — |
| Ref, передаваемый на нижележащий элемент кнопки. | ||
current | boolean | — |
Принудительно помечает элемент активным независимо от контекста. Если не задан, активное состояние определяется сравнением index с активным индексом из контекста. | ||
size | PageControlSize | — |
| Определяет размер элементов индикатора страниц. | ||
Также принимает все атрибуты <button>.
PageControlProgress
| Проп | Тип | По умолчанию |
|---|---|---|
indexобязательный | number | — |
| Индекс элемента страницы (с нуля). Используется, чтобы определить, активен ли этот элемент сейчас. | ||
duration | number | 5000 |
| Длительность анимации прогресса в миллисекундах. Определяет, сколько времени занимает заполнение. Если не задана, по умолчанию 5000 мс. | ||
ref | Ref<HTMLButtonElement> | — |
| Ref, передаваемый на нижележащий элемент кнопки. | ||
current | boolean | — |
| Активен ли сейчас этот элемент страницы. Если не задан, активное состояние определяется из контекста. | ||
size | PageControlSize | — |
| Определяет размер элементов индикатора страниц. | ||
Также принимает все атрибуты <button>.
Типы
PageControlPropsPageControlItemPropsPageControlProgressProps
Модель состояния
- Корень поддерживает контролируемое и неконтролируемое активное состояние.
- Стрелки меняют активный элемент влево и вправо.
- Перетаскивание пальцем или стилусом позволяет провести по элементам.