Stepper

Stepper в Chakra UI представляет собой компонент, предназначенный для пошагового отображения прогресса пользователя в форме или процессе. Он позволяет визуализировать текущий этап, а также количество оставшихся шагов. Stepper особенно полезен в интерфейсах, где требуется последовательное выполнение действий, например, при заполнении многошаговых форм.

Импорт и базовая структура

Для использования Stepper необходимо подключить соответствующие компоненты из Chakra UI:

import { Box, Stepper, Step, StepIndicator, StepStatus, StepTitle, StepDescription, StepSeparator } from "@chakra-ui/react";

Базовая структура Stepper включает:

  • Stepper – контейнер для всех шагов.
  • Step – отдельный шаг процесса.
  • StepIndicator – визуальная часть шага (круг с номером или иконкой).
  • StepTitle – заголовок шага.
  • StepDescription – описание шага.
  • StepSeparator – линия между шагами.

Пример минимальной разметки:

<Stepper index={1} orientation="horizontal" size="md">
  <Step>
    <StepIndicator />
    <StepTitle>Первый шаг</StepTitle>
    <StepDescription>Описание первого шага</StepDescription>
    <StepSeparator />
  </Step>

  <Step>
    <StepIndicator />
    <StepTitle>Второй шаг</StepTitle>
    <StepDescription>Описание второго шага</StepDescription>
    <StepSeparator />
  </Step>

  <Step>
    <StepIndicator />
    <StepTitle>Третий шаг</StepTitle>
    <StepDescription>Описание третьего шага</StepDescription>
  </Step>
</Stepper>

Ключевые свойства Stepper:

  • index – определяет текущий активный шаг (нумерация с нуля).
  • orientation – направление: horizontal или vertical.
  • size – размер индикаторов: sm, md, lg.
  • colorScheme – цветовая схема для активного шага.

Состояния шагов

Каждый шаг может находиться в одном из трёх состояний:

  • completed – шаг завершён. Отображается с галочкой или другим индикатором завершения.
  • active – текущий шаг. Обычно выделяется цветом.
  • inactive – шаги, которые ещё не достигнуты.
<Step isCompleted={true}>
  <StepIndicator />
  <StepTitle>Первый шаг</StepTitle>
</Step>

<Step isActive={true}>
  <StepIndicator />
  <StepTitle>Второй шаг</StepTitle>
</Step>

<Step>
  <StepIndicator />
  <StepTitle>Третий шаг</StepTitle>
</Step>

Chakra UI автоматически применяет визуальные эффекты для этих состояний: активный шаг подсвечивается, завершённые шаги показывают галочку, неактивные – приглушены.

Горизонтальная и вертикальная ориентация

Горизонтальная ориентация идеально подходит для процессов с ограниченным количеством шагов и широкими экранами:

<Stepper index={1} orientation="horizontal">
  {/* шаги */}
</Stepper>

Вертикальная ориентация удобна для мобильных интерфейсов и длинных списков шагов:

<Stepper index={0} orientation="vertical">
  {/* шаги */}
</Stepper>

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

Настройка индикаторов шагов

StepIndicator можно кастомизировать через:

  • Цвет: colorScheme.
  • Размер: через size Stepper или отдельного индикатора.
  • Содержание: вместо номера можно использовать иконку:
<StepIndicator>
  <CheckIcon />
</StepIndicator>

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

<StepStatus>
  {({ complete, active, incomplete }) => (
    <Box>
      {complete && "Завершено"}
      {active && "Текущий"}
      {incomplete && "Ожидание"}
    </Box>
  )}
</StepStatus>

Динамическое управление шагами

Step можно рендерить динамически на основе массива объектов, что удобно для многошаговых форм с серверными данными:

const steps = [
  { title: "Личные данные", description: "Введите ваши имя и фамилию" },
  { title: "Контакты", description: "Введите email и телефон" },
  { title: "Подтверждение", description: "Проверьте введённые данные" },
];

<Stepper index={currentStep}>
  {steps.map((step, idx) => (
    <Step key={idx}>
      <StepIndicator />
      <StepTitle>{step.title}</StepTitle>
      <StepDescription>{step.description}</StepDescription>
      {idx < steps.length - 1 && <StepSeparator />}
    </Step>
  ))}
</Stepper>

Состояние currentStep можно обновлять через кнопки “Далее” и “Назад”, обеспечивая интерактивность.

Интеграция с формами

Stepper часто используется совместно с react-hook-form или другими библиотеками форм. Каждый шаг может быть отдельным компонентом формы, а index Stepper синхронизируется с состоянием формы:

const [stepIndex, setStepIndex] = useState(0);

const handleNext = () => setStepIndex(prev => prev + 1);
const handleBack = () => setStepIndex(prev => prev - 1);

<Stepper index={stepIndex}>
  <Step>
    <StepIndicator />
    <StepTitle>Шаг 1</StepTitle>
    <StepDescription>Данные пользователя</StepDescription>
  </Step>
  <Step>
    <StepIndicator />
    <StepTitle>Шаг 2</StepTitle>
    <StepDescription>Адрес и контакты</StepDescription>
  </Step>
</Stepper>

<Button onCl ick={handleBack} disabled={stepIndex === 0}>Назад</Button>
<Button onCl ick={handleNext} disabled={stepIndex === steps.length - 1}>Далее</Button>

Адаптивность и стилизация

Chakra UI обеспечивает полную кастомизацию Stepper:

  • Цвета через colorScheme и системные цвета Chakra.
  • Размеры через size.
  • Отступы и выравнивание через Box и Flex внутри Stepper.
  • Темная тема поддерживается автоматически, если используется ChakraProvider с theme.

Пример кастомного стиля:

<Stepper index={1} colorScheme="teal" size="lg">
  <Step>
    <StepIndicator />
    <StepTitle>Регистрация</StepTitle>
    <StepDescription>Введите учетные данные</StepDescription>
    <StepSeparator />
  </Step>
  <Step>
    <StepIndicator />
    <StepTitle>Платеж</StepTitle>
    <StepDescription>Выберите способ оплаты</StepDescription>
  </Step>
</Stepper>

Цвет активного шага изменится на teal, индикаторы будут крупнее, а StepSeparator автоматически подстроится под размер.

Stepper в Chakra UI обеспечивает гибкость, визуальную выразительность и удобство интеграции с интерактивными формами и интерфейсами, делая его незаменимым инструментом при создании пошаговых процессов.

Оглавление