---
url: https://ain.hmgf.hxcn.space/contribution/project-components/steps.md
description: 使用 Steps 与 Step 展示流程步骤和操作顺序。
---

# Steps 组件

`Steps` + `Step` 适合说明操作流程、任务清单和教程步骤。

## 基础用法

```md
<Steps>
  <Step title="创建页面">...</Step>
  <Step title="编写内容">...</Step>
  <Step title="本地验证">...</Step>
</Steps>
```

## 紧凑模式

## Props

### Steps

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `compact` | `boolean` | `false` | 紧凑模式，缩小步骤间距。 | `:compact="true"` |

### Step

| 参数 | 类型 | 默认值 | 说明 | 示例 |
| --- | --- | --- | --- | --- |
| `title` | `string` | `''` | 步骤标题。 | `title="创建页面"` |
| `icon` | `string` | `''` | 步骤图标。 | `icon="mdi:file-document-plus-outline"` |