# PageControl: Руководства
## Паттерны
### Индикаторы карусели
Когда использовать:
- короткой карусели или последовательности в hero-блоке нужна компактная навигация
Заметки о композиции:
- держите последовательность короткой
- синхронизируйте активное состояние с реальным слайдом
Компромиссы:
- компактно и привычно
- недостаточно информативно для длинных последовательностей
```tsx
import { Card, Heading, PageControl, PageControlItem, Text } from '@vega-ui/react';
import { useId, useState } from 'react';
const slides = [
{ title: 'Plan your week', text: 'Drag tasks onto the calendar and see your free time at a glance.' },
{ title: 'Share with your team', text: 'Invite teammates to a board and assign tasks in one click.' },
{ title: 'Stay on track', text: 'Get a summary every Monday with what slipped and what is next.' },
];
export default function CarouselIndicators() {
const prefix = useId();
const [active, setActive] = useState(0);
const slide = slides[active];
return (
{slide.title}{slide.text}
{slides.map((item, index) => (
))}
);
}
```
### Точки прогресса по таймеру
Когда использовать:
- автопрокрутка или переход по таймеру — часть сценария
Заметки о композиции:
- используйте `PageControlProgress`
- согласуйте длительность с реальным таймингом автопрокрутки
Компромиссы:
- наглядно показывает продвижение
- добавляет сложность, связанную со временем, и возможные риски для доступности
```tsx
import { Button, PageControl, PageControlItem, PageControlProgress, Text } from '@vega-ui/react';
import { useState } from 'react';
const stories = ['New arrivals', 'Autumn sale', 'Gift cards', 'Store opening'];
export default function TimedProgressIndicators() {
const [active, setActive] = useState(0);
const [paused, setPaused] = useState(false);
const advance = () => setActive((active + 1) % stories.length);
return (
);
}
```
### Индикаторы шагов над формой
Когда использовать:
- многошаговому сценарию нужны лёгкие подсказки о прогрессе
Заметки о композиции:
- если важны подписи, передавайте семантику шагов в другом месте
- используйте `active`, чтобы отражать реальный текущий шаг
Компромиссы:
- компактно
- объясняет меньше, чем степпер с подписями
```tsx
import { Button, HelperText, Label, PageControl, PageControlItem, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { FormEvent, MouseEvent, useId, useState } from 'react';
const steps = ['Account', 'Workspace', 'Invite'];
export default function StepIndicatorAboveFormPages() {
const id = useId();
const [step, setStep] = useState(0);
const [reached, setReached] = useState(0);
const [result, setResult] = useState('');
const goTo = (index: number) => {
if (index > reached) return;
setStep(index);
};
const next = (event: MouseEvent) => {
const fieldset = event.currentTarget.form?.elements.namedItem(`step-${step}`);
if (!(fieldset instanceof HTMLFieldSetElement)) return;
const fields = Array.from(fieldset.elements) as HTMLInputElement[];
const valid = fields.every((field) => field.reportValidity());
if (!valid) return;
setStep(step + 1);
setReached(Math.max(reached, step + 1));
};
const handleSubmit = (event: FormEvent) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
setResult(`Workspace “${data.get('workspace')}” created for ${data.get('email')}.`);
};
return (
);
}
```
## Сравнение
### Быстрое правило выбора
Используйте `PageControl` для коротких последовательностей, например шагов онбординга или каруселей. Используйте `Pagination` для настоящей навигации по страницам наборов результатов.
### `PageControl` и `Pagination`
- Используйте `PageControl` для коротких компактных последовательностей.
- Используйте `Pagination` для явных номеров страниц и навигации по наборам данных.
### `PageControl` и `Stepper`
- Используйте `PageControl`, когда индикаторы намеренно минимальны.
- Используйте более полный паттерн степпера, когда важны подписи шагов и более подробный статус.
### Выбирайте этот компонент, когда
- последовательность короткая
- достаточно компактных индикаторов
### Не выбирайте этот компонент, когда
- пользователям нужны номера страниц или адресуемые переходы
- каждому шагу нужны видимые подписи и более подробное состояние
## Решение проблем
### Активная точка не совпадает с реальной каруселью или шагом
#### Симптом
Видимый активный индикатор и реальное состояние содержимого расходятся.
#### Вероятная причина
У родительской функциональности и `PageControl` нет общего источника истины.
#### Как проверить
- сравните текущий индекс содержимого с отрендеренным активным элементом `active`
#### Исправление
Управляйте и содержимым, и `PageControl` из одного родительского состояния.
### Точки прогресса анимируются, но ничего не переключается
#### Симптом
Заливка прогресса анимируется, но содержимое не меняется.
#### Вероятная причина
`PageControlProgress` отрендерен без соответствующей логики перехода между шагами в родительском сценарии.
#### Как проверить
- проверьте, обновляет ли родитель активное состояние по окончании анимации или по тику автопрокрутки
#### Исправление
Свяжите завершение прогресса с реальной логикой перехода или переключитесь на статичные элементы.
### Длинные последовательности трудно читать
#### Симптом
Ряд индикаторов становится трудно сосчитать или понять.
#### Вероятная причина
`PageControl` используется для слишком большого числа элементов.
#### Как проверить
- посчитайте видимые элементы и сопоставьте с тем, насколько пользователи их реально понимают
#### Исправление
Перейдите на `Pagination`, степпер с подписями или другой, более содержательный паттерн навигации.