Components

Steps 文档步骤

面向快速上手、环境部署与排错排查文档的垂直向导步骤列表。

自动编号步骤

Steps 自动管理子项的序号索引与连接线。

安装组件库依赖

通过 Bun 或 npm 将 ReCloud UI 引入项目。

在工程根目录运行：

bun add @recloudstudio/ui

引入样式与设计令牌

在应用入口导入全局样式。

在你的应用入口文件顶部引入：

import '@recloudstudio/ui/style.css'

使用组件

直接在 Vue 模板中声明组件即可。

例如：引入 <Button>点击操作</Button>。

<Steps>
  <StepItem title="安装依赖" description="引入 ReCloud UI">
    <InlineCode code="bun add @recloudstudio/ui" :copyable="true" />
  </StepItem>
  <StepItem title="引入样式">
    <InlineCode code="import '@recloudstudio/ui/style.css'" />
  </StepItem>
  <StepItem title="使用组件">
    <Button>开始体验</Button>
  </StepItem>
</Steps>

API 参考

属性	类型	默认值	说明
`startIndex`	`number`	`1`	Steps 容器的起始序号。
`StepItem.title`	`string`	`''`	步骤标题。
`StepItem.description`	`string`	`''`	步骤辅助说明。
`StepItem.step`	`number \| string`	`自动计算`	手动覆盖当前步骤的标记字符或数字。
`slot: default`	`slot`	`—`	步骤主体内容。