# PageControl: API

## Пропсы корня

| Проп | Тип | По умолчанию | Обязательный | Описание |
| --- | --- | --- | --- | --- |
| `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>`.

## Типы

- `PageControlProps`
- `PageControlItemProps`
- `PageControlProgressProps`

## Модель состояния

- Корень поддерживает контролируемое и неконтролируемое активное состояние.
- Стрелки меняют активный элемент влево и вправо.
- Перетаскивание пальцем или стилусом позволяет провести по элементам.