Steps

编号的顺序步骤 — 圆形标记自动计数并带连接线。

安装

npx @cloudflare/nimbus-docs add steps

yarn dlx @cloudflare/nimbus-docs add steps

pnpm dlx @cloudflare/nimbus-docs add steps

bunx @cloudflare/nimbus-docs add steps

预览

安装

运行 nimbus-docs add steps 将组件复制到你的仓库中。

组合

包裹一系列 <Step> 块。编号和连接线会自动生成。

编写

使用 markdown 正文 — 代码、链接、旁注在每个步骤内都可以使用。

<Steps>
<Step title="安装">
  运行 `nimbus-docs add steps` 将组件复制到你的仓库中。
</Step>
<Step title="组合">
  包裹一系列 `<Step>` 块。编号和连接线会自动生成。
</Step>
<Step title="编写">
  使用 markdown 正文 — 代码、链接、旁注在每个步骤内都可以使用。
</Step>
</Steps>

示例

基础用法

三个带有文本内容的步骤 — 计数和连接线自动生成。

克隆仓库。

使用 pnpm install 安装依赖。

使用 pnpm dev 运行开发服务器。

<Steps>
<Step>克隆仓库。</Step>
<Step>使用 `pnpm install` 安装依赖。</Step>
<Step>使用 `pnpm dev` 运行开发服务器。</Step>
</Steps>

带标题

添加 title 属性显示加粗引导文本，下方为正文内容。

安装

将包添加到你的项目中。

配置

编辑 config.json 以匹配你的环境。

运行

启动开发服务器并打开 localhost。

<Steps>
<Step title="安装">
  将包添加到你的项目中。
</Step>
<Step title="配置">
  编辑 `config.json` 以匹配你的环境。
</Step>
<Step title="运行">
  启动开发服务器并打开 localhost。
</Step>
</Steps>

自定义起始值

使用 start 在拆分的流程中延续编号。

部署

推送到 main 分支；CI 构建并部署。

验证

打开部署的 URL 并确认预发布横幅。

<Steps start={5}>
<Step title="部署">
  推送到 main 分支；CI 构建并部署。
</Step>
<Step title="验证">
  打开部署的 URL 并确认预发布横幅。
</Step>
</Steps>

API 参考

组件接受的全部属性，均源自单一声明。

Prop	Type
`start`	`number`
`title`	`string`