> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/steps.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Steps 步骤条

展示任务的进展和当前步骤。

## 基础用法


可切换步骤

1. 创建项目填写基本信息
1. 2确认配置检查项目信息
1. 3完成开始使用

上一步下一步

错误反馈

1. 创建项目填写基本信息
1. 确认配置检查项目信息
1. 3完成开始使用

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/steps/basic.tsx"
import type { StepItem } from '@ifhover/leaf-ui';

import { Button, Flex, Space, Steps, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const items: readonly StepItem[] = [
  { title: '创建项目', description: '填写基本信息' },
  { title: '确认配置', description: '检查项目信息' },
  { title: '完成', description: '开始使用' },
];

export function StepsBasic() {
  const [current, setCurrent] = useState(1);
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>可切换步骤</Text>
        <Steps items={items} current={current} onChange={setCurrent} />
      </Flex>
      <Flex gap="md" align="center" wrap justify="center">
        <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
          上一步
        </Button>
        <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
          下一步
        </Button>
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>错误反馈</Text>
        <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
      </Flex>
    </Space>
  );
}
```

展开代码

## 点状与进度模式


点状步骤

1. Create
1. Review
1. Publish

当前步骤的进度

1. Create
1. 2Review
1. 3Publish

capabilities.tsx

复制代码

```tsx lineNumbers file="../../src/examples/steps/capabilities.tsx"
import { Flex, Space, Steps, Text } from '@ifhover/leaf-ui';

const items = [{ title: 'Create' }, { title: 'Review' }, { title: 'Publish' }];

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm" align="center">
        <Text>{'点状步骤'}</Text>
        <Steps progressDot current={1} items={items} />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>{'当前步骤的进度'}</Text>
        <Steps current={1} percent={65} items={items} />
      </Flex>
    </Space>
  );
}
```

展开代码

## Steps API

| 属性            | 类型                                                                                    | 默认值            | 说明               |
| ------------- | ------------------------------------------------------------------------------------- | -------------- | ---------------- |
| `items`       | `readonly `[`StepItem`](#stepitem)`[]`                                                | 必填             | 必需。步骤列表          |
| `current`     | `number`                                                                              | `0`            | 当前步骤的索引，从 0 开始   |
| `status`      | `'process' \| 'finish' \| 'error'`                                                    | `'process'`    | 当前步骤状态           |
| `direction`   | `'horizontal' \| 'vertical'`                                                          | `'horizontal'` | 排列方向             |
| `size`        | `'sm' \| 'md' \| 'lg'`                                                                | `'md'`         | 步骤尺寸             |
| `loading`     | `boolean`                                                                             | `false`        | 当前步骤展示加载图标       |
| `onChange`    | `(current: number) => void`                                                           | —              | 设置后可点击步骤         |
| `progressDot` | `boolean \| ((dot: ReactNode, info: { index: number; status: string }) => ReactNode)` | —              | 使用点状步骤，可自定义点的内容。 |
| `percent`     | `number`                                                                              | —              | 完成百分比。           |

## StepItem

| 属性            | 类型                                           | 默认值     | 说明      |
| ------------- | -------------------------------------------- | ------- | ------- |
| `key`         | `string`                                     | —       | 稳定标识    |
| `title`       | `ReactNode`                                  | 必填      | 必需。步骤名称 |
| `description` | `ReactNode`                                  | —       | 补充说明    |
| `icon`        | `ReactNode`                                  | —       | 自定义图标   |
| `status`      | `'wait' \| 'process' \| 'finish' \| 'error'` | —       | 覆盖该步骤状态 |
| `disabled`    | `boolean`                                    | `false` | 禁用交互。   |

## 类型

定义组件属性或组装列表时可导入相关类型。

```ts
import type { StepsProps, StepItem } from '@ifhover/leaf-ui';
```

## 使用说明

current 由应用维护；onChange 提供目标索引。未指定单项 status 时，会根据 current 自动显示已完成、进行中和等待状态。