Шаги

Ведёт пользователя по процессу шаг за шагом; поддерживает горизонтальную / вертикальную раскладку, навигацию по клику и общее переопределение статуса.

Базовое использование

Базовое использование

1. Набросок

   Определить композицию и линии
2. Растушёвка

   Послойно растушевать тушь
3. 3
   Раскрашивание

   Нанести цвета даньцин
4. 4
   Надпись

   Подписать и поставить печать

1. ✕
   Набросок
2. ✕
   Растушёвка
3. ✕
   Раскрашивание

   Здесь требуется переделка
4. ✕
   Надпись

1. ✓
   Набросок

   Определить композицию и линии
2. 2
   Растушёвка

   Послойно растушевать тушь
3. 3
   Раскрашивание
4. 4
   Надпись

import { useState } from 'react'
import { LhSteps, LhStep } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhSteps current={current} onChange={(index) => setCurrent(index)}>
      <LhStep title="Эскиз" description="Композиция и линии" />
      <LhStep title="Растушёвка" description="Послойная растушёвка туши" />
      <LhStep title="Цвет" description="Наложение даньцинских цветов" />
      <LhStep title="Подпись" description="Надпись и печать завершают картину" />
    </LhSteps>
  )
}

Steps Props

Свойство	Описание	Тип	Варианты	По умолчанию
current	Индекс текущего шага (с 0, контролируемый)	number	—	—
defaultCurrent	Значение текущего шага по умолчанию (неконтролируемое)	number	—	0
direction	Направление	'horizontal' | 'vertical'	—	'horizontal'
clickable	Можно ли переходить по шагам кликом	boolean	—	false
status	Общий статус, переопределяющий все шаги (для нестандартного отображения)	'wait' | 'process' | 'finish' | 'error'	—	—
themeVars	Переменные темы на уровне компонента (ключи автоматически получают префикс --lh-)	Record<string, string>	—	—
sx	Сокращённые props макета	SxProps	—	—

Step Props

Свойство	Описание	Тип	По умолчанию
title	Заголовок шага	ReactNode	—
description	Описание шага	ReactNode	—
icon	Имя пользовательской иконки (если не задано, finish / error используют галочку / крестик, остальные показывают номер)	LhIconName	—

События Steps

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onChange	Срабатывает при смене текущего шага (только при установленном clickable)	(index: number) => void	@change

Контролируемый / неконтролируемый

Передача current делает компонент контролируемым (внутреннее состояние не хранится); передача defaultCurrent включает внутреннее неконтролируемое состояние. onChange срабатывает в обоих режимах.

Область кликабельности

Даже если clickable равен true, только «завершённые» и «текущие» шаги рендерятся как элементы <button>; будущие шаги (состояние wait) всегда остаются элементами <span>, что исключает переход к ещё не достигнутым этапам процесса — это согласуется с lh-ui-plus.

Ограничение на дочерние узлы

children должны быть непосредственно элементами LhStep (можно выводить их через .map); их нельзя оборачивать в пользовательский компонент — родитель внедряет индексы, фильтруя типы дочерних элементов через Children.toArray, и обёртка ломает внедрение индексов и расчёт статусов.

Переменные темы

Ключи themeVars автоматически получают префикс --lh- и записываются в inline-стиль корневого элемента:

<LhSteps current={1} themeVars={{ 'steps-item-basis': '72px' }}>
  <LhStep title="Эскиз" />
  <LhStep title="Растушёвка" />
</LhSteps>

Доступность

Список представляет собой <ol role="list">; текущий шаг выводит aria-current="step", а статус каждого шага выражается совместно через aria-label (шаблон steps.step из языкового пакета, например «Шаг 2») и имена классов статуса.

ref

forwardRef<HTMLOListElement> — корневой элемент <ol>. LhStep прокидывает HTMLLIElement.

Стили

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/steps'