Semantic UI 中的 Step Element 提供了一种显示过程中步骤或阶段序列的方式。它常用于多步表单、结账流程、新手引导流程，或任何引导用户完成一系列任务的界面。
本文档涵盖了 Step Element 的结构、样式和变体。有关导航组件的信息，请参阅 Menu Collection。
Step Element 是一个 UI 组件，用于直观地表示一个顺序流程。步骤可以水平或垂直显示，可以包含图标或数字，并提供有关已完成、活动和即将开始步骤的清晰视觉反馈。
来源: src/definitions/elements/step.less29-39 src/definitions/elements/step.less56-75 src/definitions/elements/step.less124-144 src/definitions/elements/step.less147-160
一个步骤元素包含多个部分，它们协同工作以创建流程的统一视觉表示。
步骤包含在 .ui.steps 容器中，该容器负责管理步骤集合的布局和外观。
来源: src/definitions/elements/step.less29-39 src/definitions/elements/step.less56-75 src/definitions/elements/step.less124-144 src/definitions/elements/step.less147-160
每个步骤可以包含几个组件
这些元素的布局通过 CSS flexbox 属性控制，具体的间距在主题变量中定义。
来源: src/definitions/elements/step.less124-144 src/definitions/elements/step.less147-160
步骤可以具有不同的状态，以指示流程中的进度。
每种状态都有特定的样式规则
| 状态管理 | 背景 | 文本颜色 | 视觉指示器 |
|---|---|---|---|
| 默认 | @background | @textColor | 标准外观 |
| 激活 | @activeBackground | @activeColor | 高亮背景 |
| 已完成 | 与默认值相同 | @completedColor | 通常显示对勾图标 |
| 已禁用 | @disabledBackground | @disabledColor | 降低不透明度，禁用指针事件 |
来源: src/definitions/elements/step.less300-381 src/themes/default/elements/step.variables103-130
Step Element 支持不同的显示变体，以适应各种 UI 需求。
有序类型通过 CSS 计数器自动为每个步骤添加编号
有序步骤使用 CSS 计数器为每个步骤自动编号。
来源: src/definitions/elements/step.less181-200
步骤可以垂直显示，以适应空间受限的界面或强调自上而下的流程
垂直显示会改变 flex 方向并相应地调整边框和间距。
来源: src/definitions/elements/step.less207-252
默认情况下，步骤包含箭头，通过视觉上将它们连接起来以指示进度。这些箭头是使用伪元素实现的，这些伪元素在步骤之间显示三角形。
箭头显示可以通过主题变量进行控制
@arrowDisplay - 控制箭头的可见性@activeArrowDisplay - 控制活动步骤的箭头可见性@lastArrowDisplay - 控制最后一个步骤的箭头可见性来源: src/definitions/elements/step.less77-96 src/definitions/elements/step.less339-350 src/themes/default/elements/step.variables67-71
Step Element 会自动适应不同的屏幕尺寸
在移动设备上（屏幕宽度小于 @largestMobileScreen），步骤会自动垂直堆叠，并调整样式以提高在小屏幕上的可读性。
来源: src/definitions/elements/step.less261-298 src/definitions/elements/step.less394-431
Step Element 支持多种变体，以自定义其外观和行为。
步骤有多种尺寸可供选择，从小到大
来源: src/definitions/elements/step.less527-559
可以使用附加变体将步骤附加到其他元素
这可以在步骤和相关内容之间创建无缝连接。
来源: src/definitions/elements/step.less449-472
可以使用数字类将步骤均匀地分割到容器宽度中
这些类强制执行每个步骤的特定宽度，以创建一致的布局。
来源: src/definitions/elements/step.less478-521
流体变体会使步骤占据其容器的全部宽度
来源: src/definitions/elements/step.less439-442
虽然在代码库中没有直接关联，但 Step Element 和 Divider Element 可以结合使用，以创建更复杂的循序渐进的界面。Divider Element 在内容部分之间提供了分隔，可以补充 Step Element。
来源: src/definitions/elements/divider.less25-38 src/definitions/elements/step.less56-75
Step Element 具有广泛的主题化功能，通过主题文件中定义的变量实现
| 类别 | 变量 | 目的 |
|---|---|---|
| 尺寸 | @verticalPadding、@horizontalPadding | 控制步骤的内边距 |
| 颜色 | @background、@activeBackground | 控制背景颜色 |
| 排版 | @titleFontFamily、@descriptionFontSize | 控制文本外观 |
| 状态 | @completedColor、@disabledColor | 控制状态颜色 |
| 间距 | @iconDistance、@descriptionDistance | 控制元素间距 |
自定义主题可以通过覆盖这些变量来创建跨应用程序的一致样式。
来源: src/themes/default/elements/step.variables1-130