使用指南 HowToUse

概览

HowToUse 组件通过图文并茂的步骤列表，清晰地向用户展示产品的使用流程或核心功能。

实时预览

步骤 1

选择模板

从我们精心设计的预设模板中挑选最适合你的一个。

步骤 2

自定义内容

使用拖拽编辑器轻松修改文字、图片和样式。

步骤 3

一键发布

完成后即可实时预览并发布到你的站点。

立即查看文档

使用方法

import { HowToUse } from '@goenhance/cms-ui';

const Example = () => (
  <HowToUse
    title="操作流程"
    list={[
      { title: "第一步", description: "内容...", mediaUrl: "..." }
    ]}
    text="了解更多"
    url="/docs"
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域主标题
list	HowToUseItem[]	[]	步骤列表项
text	string	-	底部行动按钮文字
url	string	-	底部行动按钮链接

HowToUseItem

属性	类型	说明
title	string	步骤标题
description	string (HTML)	步骤描述（支持 HTML）
mediaUrl	string	图片 URL
step	string	步骤前缀文字 (如 “Step”)

特性

• 图文混排：支持高质量图片展示，增强视觉吸引力。
• 配置化：通过简单的数组即可生成复杂的流程展示。
• 交互按钮：内置发光样式的行动按钮。