---
url: /components/steps.md
---
# Steps 步骤条

引导用户按步骤完成任务的导航条，由 `eb-step` 声明各步骤（按挂载顺序编号）。容器通过 `active` 自动推算每步状态：索引小于 active 的为完成态、等于的为进行态、大于的为等待态；`status` 可对单个步骤显式覆盖，支持竖向、居中与简洁模式。

## 基础用法

`active` 为当前步骤索引（从 0 开始），步骤状态随其联动变化。

## 动态推进

`active` 响应式变化即可驱动步骤条，常与表单分步、向导流程配合；点击按钮观察三种状态（完成 / 进行 / 等待）的切换。

## 竖向与自定义状态

`direction="vertical"` 竖向排列，`space` 控制步骤间距（数字按 px，也可传 CSS 宽度）；`status` 显式指定某步状态（如 error），优先级高于自动推算。

## 状态语义变体

`process-status` 定义当前步骤的样式语义，`finish-status` 定义已完成步骤的样式语义，均支持 wait / process / finish / error / success 五种状态。

## 简洁模式

`simple` 使用轻量样式（无连接线、图标缩小、自动居中，效果等同同时开启 align-center），适合表单顶部或弹窗内的进度提示。

## 图标与插槽

`icon` 传入图标名后替代序号圆圈；`#icon`、`#title`、`#description` 插槽可分别完全接管图标区、标题与描述。

## API