Stepper
stepper步骤条 · MUI 桥 + active/completed 走瑚琏 token
用法
基础用法
传入 steps 数组与受控 activeStep（0-based），当前步及之前自动点亮。
- 下单
- 付款
- 发货
- 完成
tsx
const steps = [
{ label: "下单" },
{ label: "付款" },
{ label: "发货" },
{ label: "完成" },
];
<Stepper steps={steps} activeStep={1} />首步
activeStep=0 时仅第一步处于激活态，其余皆为未达成态。
- 下单
- 付款
- 发货
- 完成
tsx
<Stepper steps={steps} activeStep={0} />已全部完成
activeStep 等于步数时所有步骤皆为完成态（对勾 + 主色连线）。
- 下单
- 付款
- 发货
- 完成
tsx
<Stepper steps={steps} activeStep={4} />何时用
基于 MUI 的极简横向步骤条，仅 steps + activeStep 受控展示当前进度。新代码优先用零依赖、功能更全（垂直/状态派生/可点击/描述/图标）的 Steps；本组件保留作 MUI 桥过渡，需要 MUI 主题一致性时才用。
导入
ts
import { Stepper } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| steps* | StepItem[] | — | 步骤数组，每项 { label: ReactNode }。 |
| activeStep* | number | — | 受控当前步（0-based）。值 ≥ steps.length 表示全部完成。 |
| className | string | — | — |
禁忌 / 坑
activeStep是纯受控、0-based；index < activeStep 显示为已完成，== 为进行中。要表达「全部完成」传activeStep={steps.length}。- 它是 MUI 桥（取非 overlay 件），样式经 emotion theme 读瑚琏 token；功能远弱于 Steps，能用 Steps 就别用它。
相关
Tabs · Breadcrumb · Pagination · Anchor · Affix · BackTop
Playground
- 下单
- 付款
- 发货
- 完成
<Stepper steps={steps} activeStep={1} />