使用指南 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”)

特性

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

---

主题覆盖

可覆盖变量

类名：mewx-cms-how-to-use

变量名	用途	默认值
--mewx-cms-how-to-use-bg	背景色	var(--blocks-bg-page)
--mewx-cms-how-to-use-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-how-to-use-step-text	步骤序号色	var(--blocks-primary)
--mewx-cms-how-to-use-title-text	步骤标题色	var(--blocks-text-heading)
--mewx-cms-how-to-use-muted-text	描述文字色	var(--blocks-text-muted)

覆盖示例

/* 暗色使用指引 */
.dark-how-to-use {
  --mewx-cms-how-to-use-bg: 15 23 42;
  --mewx-cms-how-to-use-heading-text: 255 255 255;
  --mewx-cms-how-to-use-step-text: 96 165 250;
  --mewx-cms-how-to-use-title-text: 255 255 255;
  --mewx-cms-how-to-use-muted-text: 148 163 184;
}

<HowToUse className="dark-how-to-use" list={[...]} text="了解更多" url="/docs" />