步骤条 Steps

明示任务流程和当前完成程度，引导用户按照步骤完成任务。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：这是步骤条组件的基础用法。
• 小型步骤条：通过size属性可以设置展示小型步骤条
• 展示描述信息：使用 description 可以添加描述信息。
• 自定义图标：指定icon可以自定义图标显示。
• 标签放置位置：标签描述文字放置的位置，默认 horizontal 水平放在图标右侧，可选 vertical 放在图标下方。
• 步骤错误：通过指定参数 status 来指定错误状态。
• 隐藏连接线：使用 lineless 可以使用无连接线模式。
• 竖直步骤条：竖直方向的步骤条。
• 箭头步骤条：指定 type: 'arrow'， 可以使用箭头类型的步骤条。注意：仅支持水平步骤条。
• 迷你箭头步骤条：指定 type: 'arrow', size: 'small'， 可以使用迷你箭头类型的步骤条。仅支持水平步骤条。description 会被忽略。
• 步骤切换：通过改变 current 参数，可以跳转到不同的步骤。
• 点状步骤条：指定 type: 'dot'， 可以使用点状的步骤条。 注意：水平步骤条的标签只可位于其下方，竖直步骤条的标签只可位于其右侧；
• 自定义节点：通过设置 customDot 可以自定义节点，可以给节点添加弹出或任意自定义操作。
• 可点击切换步骤：设置 onChange 之后，步骤条支持点击切换步骤。
• 导航步骤条：导航类型的步骤条。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Steps

Steps.Step

CustomDotRecord

export type CustomDotRecord = {
  index: number;
  status: string;
  title: ReactNode;
  description: ReactNode;
};