# 步骤条 Steps

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/steps
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

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

## 安装

```bash
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

|参数名|描述|类型|默认值|
|---|---|---|---|
|lineless|无连接线模式|boolean |`-`|
|current|当前步数|number |`1`|
|direction|显示方向|'vertical' \| 'horizontal' |`horizontal`|
|labelPlacement|标签描述文字放置的位置，默认 `horizontal` 水平放在图标右侧，可选 `vertical` 放在图标下方|'horizontal' \| 'vertical' |`horizontal`|
|size|步骤条的尺寸|'default' \| 'small' |`default`|
|status|当前步数的节点状态|'wait' \| 'process' \| 'finish' \| 'error' |`-`|
|type|节点样式类型|'default' \| 'arrow' \| 'dot' \| 'navigation' |`default`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|customDot|自定义步骤条节点 ，不支持箭头模式|(IconDot: ReactNode, stepConfig: [CustomDotRecord](#customdotrecord)) => ReactNode |`-`|
|onChange|点击步骤切换的回调，设置这个属性后，步骤条可点击切换。|(current: number, id: any) => void |`-`|

### Steps.Step

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|disabled|当前步骤点击被禁用|boolean |`-`|-|
|status|节点状态|'wait' \| 'process' \| 'finish' \| 'error' |`-`|-|
|description|节点描述|string \| ReactNode |`-`|-|
|title|节点标题|string \| ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|2.11.0|
|id|指定节点的 ID，将在 onChange 回调中作为参数。|any |`-`|-|
|style|节点样式|CSSProperties |`-`|2.11.0|
|onClick|点击回调|(index: number, id: any, e) => void |`-`|`e` in `2.40.0`|

### CustomDotRecord

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt