UG666

UG666 UI
@ug666/react 文档演示

Steps 步骤条

Steps 用于展示多步骤流程进度，支持水平与垂直方向，已完成步骤显示勾选标记。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Steps } from '@ug666/react'

水平步骤

订单流程：下单 → 付款 → 发货 → 完成，当前处于付款阶段。

下单

订单已提交

2

付款

等待买家付款

3

发货

商家正在备货

4

完成

交易已成功

垂直步骤

适合在侧边栏或纵向流程中展示步骤进度。

创建账号

填写基本信息

完善资料

上传头像与简介

3

加入团队

接受邀请链接

4

开始使用

进入工作台

步骤切换

通过 useState 演示进度推进与回退，当前步骤：{current + 1}/{ORDER_ITEMS.length}。

下单

订单已提交

2

付款

等待买家付款

3

发货

商家正在备货

4

完成

交易已成功

第 2 / 4 步

错误状态

当前步骤设置 status='error' 时以红色标记错误步骤。

下单

订单已提交

付款

等待买家付款

3

发货

商家正在备货

4

完成

交易已成功

代码示例

搭配 useState 实现受控步骤切换。

import { useState } from 'react'
import { Steps } from '@ug666/react'

const orderItems = [
  { title: '下单', description: '订单已创建' },
  { title: '付款', description: '等待买家付款' },
  { title: '发货', description: '商家正在备货' },
  { title: '完成', description: '交易成功' },
]

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

  return (
    <div className="space-y-4">
      <Steps current={current} items={orderItems} />
      <div className="flex gap-2">
        <button onClick={() => setCurrent(c => Math.max(0, c - 1))}>上一步</button>
        <button onClick={() => setCurrent(c => Math.min(orderItems.length - 1, c + 1))}>下一步</button>
      </div>
    </div>
  )
}

Props 说明

属性类型默认值说明
currentnumber—当前激活步骤下标（0-based）。
itemsArray<{ title: string; description?: string; icon?: ReactNode }>—步骤列表配置项。
direction'horizontal' | 'vertical''horizontal'步骤条排列方向。
status'process' | 'finish' | 'error''process'当前步骤状态。