Steps

steps

步骤条(原生) · 零依赖数据驱动 items + 水平/垂直 + wait/process/finish/error 状态派生 + 可点击受控(替代 MUI Stepper 桥 · 分步表单/审批流)

用法

基础用法

items 提供标题/描述，current 指定当前步——之前的步自动标记为完成。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

const items = [
  { title: "提交申请", description: "填写报销单据" },
  { title: "部门审批", description: "主管复核金额" },
  { title: "财务打款", description: "对公转账" },
  { title: "完成", description: "归档结案" },
];

<Steps items={items} current={1} />

错误态

status="error" 将当前步标红，表示该步骤校验失败或被驳回。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps items={items} current={2} status="error" />

垂直方向

direction="vertical" 纵向排列，适合侧栏或窄容器。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps direction="vertical" items={items} current={2} />

小尺寸

size="sm" 收紧指示器与文字，适合密集中后台布局。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps size="sm" items={items} current={1} />

可点击 + 受控

传入 onChange 后每步可点击，配合 useState 实现上一步/下一步导航。

tsx

function Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex flex-col gap-5">
      <Steps items={items} current={current} onChange={setCurrent} />
      <div className="flex gap-2">
        <Button variant="outline" size="sm" disabled={current === 0}
          onClick={() => setCurrent((c) => c - 1)}>上一步</Button>
        <Button size="sm" disabled={current === items.length - 1}
          onClick={() => setCurrent((c) => c + 1)}>下一步</Button>
      </div>
    </div>
  );
}

何时用

零依赖、数据驱动的步骤条，用于分步表单、订单流转、审批流的进度展示，支持水平/垂直、状态派生、可点击受控、描述/图标。是 Stepper（MUI 桥）的首选替代——新代码一律用 Steps，功能更全且不引 MUI。

导入

import { Steps } from "@hulianui/ui"

Props

名称	类型	默认	说明
items*	`StepsItem[]`	—	步骤数组，见下表。
current	`number`	`0`	当前步骤索引（从 0 起），用于派生各步状态。
status	`"process" \| "finish" \| "error"`	`"process"`	当前步（index===current）的状态。
direction	`"horizontal" \| "vertical"`	`"horizontal"`	排布方向。
size	`"sm" \| "md"`	`"md"`	尺寸。
className	`string`	—	—

StepsItem

字段	类型	说明
title*	`ReactNode`	步骤标题。
description	`ReactNode`	标题下方次要文案。
icon	`ReactNode`	自定义指示器内容（覆盖默认序号/状态图标）。
status	`"wait" \| "process" \| "finish" \| "error"`	显式状态，覆盖由 current 派生的状态。
disabled	`boolean`	禁用：不可点击、降透明度。

Events

事件	类型	说明
onChange	`(index: number) => void`	提供则每步可点击，点击非禁用步触发（index）。

禁忌 / 坑

步状态默认由 current 派生：index < current → finish，== current → status（默认 process），> current → wait；要单独标某步可在该 StepsItem.status 显式覆盖。
传了 onChange 才可点击；点击禁用步（disabled）不触发回调。

Playground

currentdirectionstatussize

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

<Steps
  current={1}
  items={[
    { title: "提交申请", description: "填写报销单据" },
    { title: "部门审批", description: "主管复核金额" },
    { title: "财务打款", description: "对公转账" },
    { title: "完成", description: "归档结案" },
  ]}
/>

用法

基础用法

items 提供标题/描述，current 指定当前步——之前的步自动标记为完成。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

const items = [
  { title: "提交申请", description: "填写报销单据" },
  { title: "部门审批", description: "主管复核金额" },
  { title: "财务打款", description: "对公转账" },
  { title: "完成", description: "归档结案" },
];

<Steps items={items} current={1} />

错误态

status="error" 将当前步标红，表示该步骤校验失败或被驳回。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps items={items} current={2} status="error" />

垂直方向

direction="vertical" 纵向排列，适合侧栏或窄容器。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps direction="vertical" items={items} current={2} />

小尺寸

size="sm" 收紧指示器与文字，适合密集中后台布局。

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

tsx

<Steps size="sm" items={items} current={1} />

可点击 + 受控

传入 onChange 后每步可点击，配合 useState 实现上一步/下一步导航。

tsx

function Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex flex-col gap-5">
      <Steps items={items} current={current} onChange={setCurrent} />
      <div className="flex gap-2">
        <Button variant="outline" size="sm" disabled={current === 0}
          onClick={() => setCurrent((c) => c - 1)}>上一步</Button>
        <Button size="sm" disabled={current === items.length - 1}
          onClick={() => setCurrent((c) => c + 1)}>下一步</Button>
      </div>
    </div>
  );
}

Props

名称	类型	默认	说明
items*	`StepsItem[]`	—	步骤数组，见下表。
current	`number`	`0`	当前步骤索引（从 0 起），用于派生各步状态。
status	`"process" \| "finish" \| "error"`	`"process"`	当前步（index===current）的状态。
direction	`"horizontal" \| "vertical"`	`"horizontal"`	排布方向。
size	`"sm" \| "md"`	`"md"`	尺寸。
className	`string`	—	—

StepsItem

字段	类型	说明
title*	`ReactNode`	步骤标题。
description	`ReactNode`	标题下方次要文案。
icon	`ReactNode`	自定义指示器内容（覆盖默认序号/状态图标）。
status	`"wait" \| "process" \| "finish" \| "error"`	显式状态，覆盖由 current 派生的状态。
disabled	`boolean`	禁用：不可点击、降透明度。

事件

类型

说明

onChange

(index: number) => void

提供则每步可点击，点击非禁用步触发（index）。

Playground

currentdirectionstatussize

提交申请填写报销单据
部门审批主管复核金额
财务打款对公转账
完成归档结案

<Steps
  current={1}
  items={[
    { title: "提交申请", description: "填写报销单据" },
    { title: "部门审批", description: "主管复核金额" },
    { title: "财务打款", description: "对公转账" },
    { title: "完成", description: "归档结案" },
  ]}
/>

Steps

用法

基础用法

错误态

垂直方向

小尺寸

可点击 + 受控

何时用

导入

Props

Events

禁忌 / 坑

相关

Playground

Steps

用法

基础用法

错误态

垂直方向

小尺寸

可点击 + 受控

何时用

导入

Props

Events

禁忌 / 坑

相关

Playground