PageControl

Паттерны

Индикаторы карусели

Когда использовать:

• короткой карусели или последовательности в hero-блоке нужна компактная навигация

Заметки о композиции:

• держите последовательность короткой
• синхронизируйте активное состояние с реальным слайдом

Компромиссы:

• компактно и привычно
• недостаточно информативно для длинных последовательностей

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);

Точки прогресса по таймеру

Когда использовать:

• автопрокрутка или переход по таймеру — часть сценария

Заметки о композиции:

• используйте PageControlProgress
• согласуйте длительность с реальным таймингом автопрокрутки

Компромиссы:

• наглядно показывает продвижение
• добавляет сложность, связанную со временем, и возможные риски для доступности

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, чтобы отражать реальный текущий шаг

Компромиссы:

• компактно
• объясняет меньше, чем степпер с подписями

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) => {

Сравнение

Быстрое правило выбора

Используйте PageControl для коротких последовательностей, например шагов онбординга или каруселей. Используйте Pagination для настоящей навигации по страницам наборов результатов.

PageControl и Pagination

• Используйте PageControl для коротких компактных последовательностей.
• Используйте Pagination для явных номеров страниц и навигации по наборам данных.

PageControl и Stepper

• Используйте PageControl, когда индикаторы намеренно минимальны.
• Используйте более полный паттерн степпера, когда важны подписи шагов и более подробный статус.

Выбирайте этот компонент, когда

• последовательность короткая
• достаточно компактных индикаторов

Не выбирайте этот компонент, когда

• пользователям нужны номера страниц или адресуемые переходы
• каждому шагу нужны видимые подписи и более подробное состояние

Решение проблем

Активная точка не совпадает с реальной каруселью или шагом

Симптом

Видимый активный индикатор и реальное состояние содержимого расходятся.

Вероятная причина

У родительской функциональности и PageControl нет общего источника истины.

Как проверить

• сравните текущий индекс содержимого с отрендеренным активным элементом active

Исправление

Управляйте и содержимым, и PageControl из одного родительского состояния.

Точки прогресса анимируются, но ничего не переключается

Симптом

Заливка прогресса анимируется, но содержимое не меняется.

Вероятная причина

PageControlProgress отрендерен без соответствующей логики перехода между шагами в родительском сценарии.

Как проверить

• проверьте, обновляет ли родитель активное состояние по окончании анимации или по тику автопрокрутки

Исправление

Свяжите завершение прогресса с реальной логикой перехода или переключитесь на статичные элементы.

Длинные последовательности трудно читать

Симптом

Ряд индикаторов становится трудно сосчитать или понять.

Вероятная причина

PageControl используется для слишком большого числа элементов.

Как проверить

• посчитайте видимые элементы и сопоставьте с тем, насколько пользователи их реально понимают

Исправление

Перейдите на Pagination, степпер с подписями или другой, более содержательный паттерн навигации.