步骤条

1. 组件概述

步骤条是一个内容展示组件，用于展示流程的各个步骤以及当前所处的进度。它将一个复杂的任务或流程分解为多个有序的步骤，让用户清晰地了解整体进度和当前位置。步骤条适用于需要引导用户按顺序完成多个阶段的场景，例如学习路径展示、任务完成进度、操作流程指引等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：学习路径展示。在一个分阶段的学习课程中，使用步骤条展示”基础入门 → 进阶学习 → 实战练习 → 综合测评”等学习阶段。当用户完成某个阶段后，工作流更新当前步骤值，步骤条自动显示最新进度，让学生清楚自己的学习进展。

• 场景二：AI 对话流程引导。在一个多轮对话的 AI 应用中，使用步骤条展示对话流程，如”输入问题 → AI 分析中 → 生成答案 → 完成”。通过绑定变量动态更新当前步骤和状态，让用户直观了解 AI 处理的进度。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

基本折叠组

配置项	说明
步骤列表	配置步骤条中显示的各个步骤。每个步骤可以设置标题、副标题和描述三个内容。标题是步骤的主要名称（如”第一步”），副标题是补充说明（如”预计5分钟”），描述是更详细的说明文字。至少需要配置 2 个步骤，可以通过拖拽调整步骤顺序。
当前步骤	指定当前处于哪一步。填写数字，从 0 开始计数（0 表示第一步，1 表示第二步，以此类推）。可以绑定变量，实现根据流程进度动态更新当前步骤。
当前状态	设置当前步骤的显示状态。可选值：进行中（蓝色，表示正在处理）、等待（灰色，表示尚未开始）、完成（绿色，表示已完成）、出错（红色，表示处理失败）。默认为”完成”。
获取步骤接口	配置一个接口地址，从服务器动态获取步骤数据。适用于步骤内容需要根据不同情况动态变化的场景。如果配置了此接口，将优先使用接口返回的步骤数据。

状态折叠组

配置项	说明
可见	控制步骤条是否显示。默认可见。可以绑定变量，根据条件动态控制显示或隐藏。
隐藏	控制步骤条是否隐藏。与”可见”相反。

设计

基本折叠组

配置项	说明
模式	设置步骤条的布局方向。水平：步骤从左到右横向排列，适合步骤较少的场景；竖直：步骤从上到下纵向排列，适合步骤较多或需要显示详细描述的场景；简单：精简显示模式，只显示步骤标题，适合空间有限的场景。默认为”水平”。
步骤状态	用于在编辑器中预览不同状态下的步骤样式。可选：常规、完成、进行中、等待、出错。此配置仅影响编辑器预览效果，不影响实际运行时的显示。
图标文字垂直展示	开启后，步骤的图标和文字将垂直排列（图标在上，文字在下）。关闭时，图标和文字水平排列。默认关闭。

图标样式折叠组

配置项	说明
隐藏图标	开启后隐藏步骤前的数字图标，只显示文字内容。
尺寸	设置图标的大小。
颜色	设置图标的背景颜色。可以针对不同状态（完成、进行中、等待、出错）分别设置不同的颜色。

标题样式折叠组

配置项	说明
隐藏标题	开启后隐藏步骤的标题文字。
字体样式	设置标题的字体、字号、颜色等样式。可以针对不同状态分别设置不同的样式。

副标题样式折叠组

配置项	说明
隐藏副标题	开启后隐藏步骤的副标题文字。
字体样式	设置副标题的字体、字号、颜色等样式。可以针对不同状态分别设置不同的样式。

描述样式折叠组

配置项	说明
隐藏描述	开启后隐藏步骤的描述文字。
字体样式	设置描述的字体、字号、颜色等样式。可以针对不同状态分别设置不同的样式。