Daren Design
ESC

Steps

Steps 组件，源码位于 components/ui/steps.tsx。以下示例为组件库源码的构建期真实渲染。

样式变体

基础横向步骤条Basic horizontal

  1. 填写信息
  2. 2确认订单
  3. 3完成支付

纯标题无描述Title only

  1. 1选择方案
  2. 2配置参数
  3. 3部署上线

状态变体

进行中Process

  1. 已提交
  2. 2审核中
  3. 3待发布

已完成Finish

  1. 下单
  2. 发货
  3. 签收

错误态Error

  1. 上传文件
  2. 2校验失败
  3. 3导入数据

等待态Wait

  1. 1开始任务
  2. 2执行任务
  3. 3归档任务

形态变体

纵向步骤条Vertical

  1. 创建账号
  2. 2完善资料
  3. 3开始使用

带描述文字With description

  1. 提交申请填写并提交开通表单
  2. 2等待审核管理员将在 1 个工作日内处理
  3. 3开通成功收到通知后即可登录使用

多步骤长流程Long flow

  1. 需求
  2. 设计
  3. 3开发
  4. 4测试
  5. 5发布