Stepper
Пошаговый сценарий: точки прогресса с галочками, содержимое въезжает с той стороны, куда вы идёте, а высота подстраивается под каждый шаг.
зависимости 0файлы tsx + cssпараметры 6react 18+
X 0000 Y 0000
Пульт06 параметров
01nextLabel
Текст кнопки «далее».
02backLabel
Текст кнопки «назад».
03finishLabel
Текст на последнем шаге.
04clickableSteps
Возвращаться к пройденным шагам по клику.
05accentColor
Цвет прогресса и кнопки.
06duration
ms
Время перехода.
01 Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
nextLabel | string | "Далее" | Текст кнопки «далее». |
backLabel | string | "Назад" | Текст кнопки «назад». |
finishLabel | string | "Готово" | Текст на последнем шаге. |
clickableSteps | boolean | true | Возвращаться к пройденным шагам по клику. |
accentColor | string | "#b6e24c" | Цвет прогресса и кнопки. |
duration | number | 450 | Время перехода. |
steps | StepperStep[] | — | { title, content } для каждого шага. |
completeContent | ReactNode | 'All done.' | Показывается после последнего шага. |
onStepChange | (index: number) => void | — | Вызывается при каждой смене шага. |
onFinish | () => void | — | Вызывается, когда пройден последний шаг. |
stepLabel | (n, title) => string | — | Имя точки прогресса для скринридеров. |
className | string | — | Передаётся корневому элементу. |
style | CSSProperties | — | Передаётся корневому элементу. |