Stepper 步骤条

基本语法

<c-stepper>
  <c-step title="步骤标题">步骤详细描述</c-step>
  <c-step title="步骤标题">步骤详细描述</c-step>
</c-stepper>

参数说明

使用示例

示例 1：安装流程

<c-stepper>
  <c-step title="下载主题">
    前往 <a href="https://github.com/acanyo/theme-clarity/releases">Releases</a> 页面下载最新版本的 zip 文件。
  </c-step>
  <c-step title="上传安装">
    登录 Halo 后台，进入「外观」-「主题」，点击「安装主题」，选择本地上传。
  </c-step>
  <c-step title="启用主题">
    安装完成后，点击「启用」按钮激活主题。
  </c-step>
  <c-step title="配置设置">
    进入主题设置，根据需要配置各项参数。
  </c-step>
</c-stepper>

示例 2：开发流程

<c-stepper>
  <c-step title="需求分析">
    与产品经理沟通，明确功能需求和验收标准。
  </c-step>
  <c-step title="技术设计">
    <ul>
      <li>确定技术方案</li>
      <li>编写设计文档</li>
      <li>评审通过</li>
    </ul>
  </c-step>
  <c-step title="编码实现">
    按照设计文档进行功能开发，编写单元测试。
  </c-step>
  <c-step title="测试上线">
    完成集成测试、性能测试，通过后发布上线。
  </c-step>
</c-stepper>

示例 3：使用教程

<c-stepper>
  <c-step title="创建文章">
    在 Halo 后台点击「写文章」
  </c-step>
  <c-step title="插入组件">
    在编辑器中切换到源码模式，粘贴组件代码
  </c-step>
  <c-step title="预览效果">
    切换回可视化模式或点击预览查看效果
  </c-step>
</c-stepper>

使用效果