Steps

Компонент Steps в Ant Design предназначен для визуального отображения последовательности шагов процесса, таких как оформление заказа, регистрация пользователя или прохождение многоступенчатой формы. Он позволяет показывать текущий шаг, завершённые и предстоящие шаги с помощью интуитивно понятной визуальной схемы.

Основные элементы и структура

Компонент состоит из двух ключевых элементов:

  1. Steps – контейнер, который управляет порядком шагов и их состоянием.
  2. Step – отдельный шаг с заголовком, описанием и статусом.

Простейший пример использования:

import { Steps } from 'antd';

const { Step } = Steps;

<Steps current={1}>
  <Step title="Регистрация" description="Создание аккаунта" />
  <Step title="Проверка Email" description="Подтверждение почты" />
  <Step title="Завершение" description="Настройка профиля" />
</Steps>
  • current – указывает индекс активного шага (начинается с 0).
  • title – основной заголовок шага.
  • description – дополнительная информация или пояснение.

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

Каждый шаг может иметь несколько состояний, влияющих на его визуальное отображение:

  • wait – шаг ожидает выполнения (стандартное состояние).
  • process – текущий активный шаг.
  • finish – шаг завершён.
  • error – шаг завершился с ошибкой.

Пример задания статусов:

<Steps current={1}>
  <Step title="Регистрация" status="finish" />
  <Step title="Проверка Email" status="process" />
  <Step title="Завершение" status="wait" />
  <Step title="Оплата" status="error" />
</Steps>

Вертикальная и горизонтальная ориентация

Компонент Steps поддерживает два направления отображения: горизонтальное (по умолчанию) и вертикальное.

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

Пример вертикального отображения:

<Steps direction="vertical" current={0}>
  <Step title="Регистрация" description="Создание аккаунта" />
  <Step title="Проверка Email" description="Подтверждение почты" />
  <Step title="Завершение" description="Настройка профиля" />
</Steps>

Индикаторы и иконки

Каждый шаг может быть украшен иконкой. Ant Design предоставляет встроенные иконки или позволяет использовать кастомные компоненты.

import { UserOutlined, SolutionOutlined, SmileOutlined } from '@ant-design/icons';

<Steps current={1}>
  <Step title="Регистрация" icon={<UserOutlined />} />
  <Step title="Проверка Email" icon={<SolutionOutlined />} />
  <Step title="Завершение" icon={<SmileOutlined />} />
</Steps>
  • icon – добавляет визуальный элемент к шагу, повышая наглядность процесса.
  • Можно комбинировать с status, чтобы иконка меняла цвет в зависимости от состояния шага.

Контроль прогресса с помощью состояния current

Состояние current позволяет динамически управлять активным шагом. Это удобно для многоступенчатых форм или динамических процессов.

Пример динамического управления:

const [current, setCurrent] = useState(0);

const next = () => setCurrent(current + 1);
const prev = () => setCurrent(current - 1);

<Steps current={current}>
  <Step title="Регистрация" />
  <Step title="Проверка Email" />
  <Step title="Завершение" />
</Steps>

<Button onCl ick={prev}>Назад</Button>
<Button onCl ick={next}>Вперед</Button>
  • Управление через состояние позволяет создавать интерактивные интерфейсы.
  • Кнопки “Назад” и “Вперед” изменяют активный шаг, а Steps автоматически обновляет визуальное отображение.

Сложные сценарии: шаги с ошибкой и кастомным контентом

Шаги могут содержать кастомный контент, например форму, изображения или пояснения. Ошибочные шаги удобно выделять с помощью status=“error” и добавлять пояснение через description.

<Steps current={1}>
  <Step title="Регистрация" description="Создан аккаунт" status="finish" />
  <Step title="Проверка Email" description="Ошибка: письмо не получено" status="error" />
  <Step title="Завершение" description="Настройка профиля" status="wait" />
</Steps>
  • status=“error” автоматически окрашивает шаг в красный цвет, сигнализируя о проблеме.
  • Можно добавлять ссылки или кнопки в description для исправления ошибки.

Настройка размера и адаптивность

Компонент поддерживает изменение размера через size:

  • default – стандартный размер.
  • small – компактный размер для ограниченных пространств.
<Steps size="small" current={0}>
  <Step title="Регистрация" />
  <Step title="Проверка Email" />
  <Step title="Завершение" />
</Steps>
  • Горизонтальные шаги автоматически адаптируются к ширине контейнера.
  • Вертикальные шаги корректно отображаются на мобильных устройствах благодаря встроенной адаптивности.

Использование с кастомными компонентами

Steps можно интегрировать с формами и другими компонентами Ant Design для создания многоступенчатых интерфейсов.

Пример интеграции с Form:

import { Form, Input, Button } from 'antd';

const [current, setCurrent] = useState(0);

const steps = [
  {
    title: 'Регистрация',
    content: <Form><Form.Item name="username" label="Имя пользователя"><Input /></Form.Item></Form>
  },
  {
    title: 'Проверка Email',
    content: <Form><Form.Item name="email" label="Email"><Input /></Form.Item></Form>
  },
  {
    title: 'Завершение',
    content: <div>Все готово!</div>
  }
];

<Steps current={current}>
  {steps.map(item => <Step key={item.title} title={item.title} />)}
</Steps>

<div>{steps[current].content}</div>
<Button disabled={current === 0} onCl ick={() => setCurrent(current - 1)}>Назад</Button>
<Button disabled={current === steps.length - 1} onCl ick={() => setCurrent(current + 1)}>Вперед</Button>
  • Каждый шаг может иметь свой компонент.
  • Позволяет создавать гибкие формы с управлением шагами и проверкой данных.

Компонент Steps обеспечивает наглядное представление многоступенчатых процессов, поддерживает разнообразные состояния и ориентации, легко интегрируется с другими компонентами Ant Design и полностью настраивается под требования интерфейса.

Оглавление