Steps 步骤条
Rue Steps 展示 daisyUI 的轻量视觉风格，同时补充更贴近成熟业务组件的数据驱动 API： 支持 items、current、status、progressDot、onChange，以及单步级别的title、description、subTitle和icon。
双模式
children / items 都可用
基础的Steps.Step和Steps.Icon 不变，新场景可直接传入数据数组。
状态推导
current 自动推导完成/进行中/等待
不必手动给每一步都写颜色，只有例外项再单独覆盖即可。
内容增强
支持标题、副标题、描述和进度点
适合把基础只能写一行文本的步骤条，扩展成更完整的流程说明区。
基础布局
这组示例使用 Rue 基础示例，用来展示最基础的横向、纵向和响应式排列方式。
# Horizontal
- Register
- Choose plan
- Purchase
- Receive Product
# Vertical
- Register
- Choose plan
- Purchase
- Receive Product
# Responsive
- Register
- Choose plan
- Purchase
- Receive Product
视觉定制
这组示例展示当前 Rue 的静态能力，包括自定义 icon、data-content、语义色和滚动容器。
# With custom content in step-icon
- 1Step 1
- 2Step 2
- 3Step 3
# With data-content
- Step 1
- Step 2
- Step 3
- Step 4
- Step 5
# Custom colors
- Fly to moon
- Shrink the moon
- Grab the moon
- Sit on toilet
# With scrollable wrapper
长标签交付流程
- 需求确认
- 设计评审与资源排期
- 前后端联调验收
- 灰度发布到内部环境
- 邀请试点客户体验
- 收集反馈并修复阻塞问题
- 准备正式发布说明
- 上线窗口审批
- 生产环境发布
- 发布后巡检
- 归档复盘
编号里程碑
- Start
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- End
语义 API
下面这些示例展示的是这些的语义层能力，目标是让 Rue Steps 在不丢失当前风格的前提下更接近常见业务组件的使用体验。
# Rich step content
- Connect repositoryLink your GitHub repository and import the default build settings.
- Configure policies~ 2 minsSet preview branches, branch protection, and deployment rules.
- Ship to productionMerge the release branch after the final smoke test passes.
# Items + current + status
- AccountCreate workspace and invite collaborators.
- VerificationLeft 00:00:08Waiting for security review and DNS validation.
- PaymentUnlock the production environment after confirmation.
- DoneYour first deployment is ready.
当前索引为
1，所以第 0 步自动完成，第 1 步继承根节点的 error 状态。# Clickable items
- DraftPrepare the release scope and changelog.
- ReviewQA and product approve the rollout plan.
- DeployPromote the release to production.
点击步骤可切换，当前选中步骤：
0# Progress dot
- Collect requirementsAlign scope with design and engineering.
- BuildDemoCreate a stakeholder-ready flow.
- Launch betaOpen access to pilot users.
API
Steps负责布局、状态推导与点击切换；Steps.Step和 StepItem共享同一组单步属性。
Steps
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
direction / orientation | 设置整体朝向；支持使用 Rue 基础的 direction 写法，也支持更通用的 orientation 别名。 | 'horizontal' | 'vertical' | - |
items | 数据驱动模式，适合与 current、status、onChange 一起使用。 | StepItem[] | - |
current | 当前进行中的步骤索引；前面的步骤自动推导为完成态，后面的步骤自动推导为等待态。 | number | - |
status | 当前步骤的全局状态覆盖，仅作用于 current 命中的步骤。 | 'wait' | 'process' | 'finish' | 'error' | 'process' |
progressDot | 切换为进度点模式，也支持自定义 dot 渲染函数。 | boolean | (dot, info) => any | false |
onChange | 搭配 items 使用时启用点击切换，回传目标步骤索引。 | (current: number) => void | - |
Steps.Step / StepItem
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 直接指定 Rue 语义色；未指定时会根据 status 自动映射。 | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 按 status 推导 |
title | 步骤主标题；在 children 写法中可与 description、subTitle、icon 组合为语义化内容区。 | any | - |
description / content | 标题下方的补充说明文字；content 优先级高于 description。 | any | - |
subTitle | 标题旁边的次级信息，适合展示倒计时、状态文案等。 | any | - |
icon | 自定义步骤图标；支持基础的 <Steps.Icon /> 插槽写法。 | any | - |
status | 单步状态，可覆盖根组件根据 current 推导的结果。 | 'wait' | 'process' | 'finish' | 'error' | - |
dataContent / data-content | 直接控制 daisyUI step 圆点中的字符，适合问号、勾号或自定义符号。 | string | - |
clickable / disabled | 控制单步是否可交互，以及是否禁用点击切换。 | boolean | false |