步骤
使用 steps 组件创建带编号的分步流程，引导用户完成顺序任务、教程和设置工作流。
使用步骤来展示一系列按顺序进行的操作或事件。你可以根据需要添加任意多的步骤。
第一步
以下仅适用于第一步的说明或内容。
第二步
以下仅适用于第二步的说明或内容。
第三步
以下仅适用于第三步的说明或内容。
<Steps>
<Step title="第一步">
以下仅适用于第一步的说明或内容。
</Step>
<Step title="第二步">
以下仅适用于第二步的说明或内容。
</Step>
<Step title="第三步">
以下仅适用于第三步的说明或内容。
</Step>
</Steps>childrenReactElement<StepProps>[]requiredStep 组件列表。
titleSizestringdefault: p步骤标题的字号。可选值为 p、h2、h3 和 h4。
titlestringrequired标题是该步骤的主要文本，显示在指示器旁边。
childrenstring | ReactNode步骤的内容，可以是纯文本或组件。
iconstring要显示的图标。
可选值：
- Font Awesome 图标名称 (如果你在
docs.json中将icons.library属性 设置为fontawesome) - Lucide 图标名称 (如果你在
docs.json中将icons.library属性 设置为lucide) - Tabler 图标名称 (如果你在
docs.json中将icons.library属性 设置为tabler) - 指向外部托管图标的 URL
- 项目中图标文件的路径
- 用花括号包裹的 SVG 代码
对于自定义 SVG 图标：
- 使用 SVGR 转换器 转换你的 SVG。
- 将 SVG 代码粘贴到 SVG 输入框。
- 从 JSX 输出框中复制完整的
<svg>...</svg>元素。 - 用花括号包裹可用于 JSX 的 SVG 代码：
icon={<svg ...> ... </svg>}。 - 根据需要调整
height和width。
iconTypestringFont Awesome 的图标样式。仅在使用 Font Awesome 图标时生效。
可选值：regular、solid、light、thin、sharp-solid、duotone、brands。
stepNumbernumber步骤编号。
titleSizestringdefault: p步骤标题的字号。可选值为 p、h2、h3 和 h4。
idstring步骤的自定义 ID，用于锚点链接和目录导航。
noAnchorbooleandefault: false是否隐藏该步骤的锚点链接。
Was this page helpful?Suggest editsRaise issue