跳转到主要内容
使用步骤来展示一系列按顺序进行的操作或事件。你可以根据需要添加任意多的步骤。
1

第一步

以下仅适用于第一步的说明或内容。
2

第二步

以下仅适用于第二步的说明或内容。
3

第三步

以下仅适用于第三步的说明或内容。
Steps example
<Steps>
  <Step title="第一步">
    这些是仅适用于第一步的说明或内容。
  </Step>
  <Step title="第二步">
    这些是仅适用于第二步的说明或内容。
  </Step>
  <Step title="第三步">
    这些是仅适用于第三步的说明或内容。
  </Step>
</Steps>

​
Steps 属性

​
children
ReactElement<StepProps>[]
必填
Step 组件列表。
​
titleSize
string
默认值:"p"
步骤标题的大小。可选值：p、h2、h3。

​
单个步骤属性

​
children
string | ReactNode
必填
步骤的内容，可以是纯文本或组件。
​
icon
string
要显示的图标。可选值：
  • Font Awesome 图标名称（例如 github）
  • Lucide 图标名称（例如 rocket）
  • 指向外部托管图标的 URL
  • 项目中图标文件的路径
  • 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
  1. 使用 SVGR 转换器 转换你的 SVG。
  2. 将 SVG 代码粘贴到 SVG 输入框。
  3. 从 JSX 输出框中复制完整的 <svg>...</svg> 元素。
  4. 用花括号包裹可用于 JSX 的 SVG 代码：icon={<svg ...> ... </svg>}。
  5. 根据需要调整 height 和 width。
​
iconType
string
Font Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
​
title
string
标题是该步骤的主要文本，显示在指示器旁边。
​
stepNumber
number
步骤编号。
​
titleSize
string
默认值:"p"
步骤标题的字号。可选值为 p、h2 和 h3。