---
title: Steps 步骤条
description: 用于任务步骤展示或任务进度展示。
spline: base
isComponent: true
toc: false
---

## 基本用法

- **title**: 步骤条子项标题，支持 `props` 和 `slot` 传入
- **content**: 步骤条子项描述，支持 `props` 和 `slot` 传入
- **current**: 步骤条当前步骤，支持语法糖 `v-modal` 或 `v-model:current`

{{ horizontal }}

### 横向可操作步骤条

通过 `readonly` 属性可设置步骤条是否为只读，默认`false`<br/>
通过  `options` 属性可设置步骤的数据列表，同 `step-item` 作用一样

{{ click }}

### 横向带图标可操作

通过 `icon` 属性可设置步骤项图标，支持 `Boolean` 、`slot` 传入， 为 `true` 则显示内置图标。

{{ icon }}

### 竖向基础展示

通过 `direction` 属性可设置步骤条布局方式，可选性 `horizontal` 、 `vertical` 默认值 `horizontal`
{{ vertical }}

### 竖向自定义内容

{{ content }}
