基础步骤 Steps

概览

StepsSection 是一个简洁的步骤引导组件，通过醒目的序列号和卡片布局，清晰地展示多阶段流程。相比 StepsSectionGradient，它更轻量简约。

实时预览

三步开始

简单流程，快速上手

01

注册账号

填写基本信息，完成注册。

02

选择模板

从预设模板中挑选合适的起点。

03

发布上线

自定义内容后一键发布。

使用方法

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

const Example = () => (
  <StepsSection
    title="快速上手"
    subtitle="只需三步"
    steps={[
      { title: "第一步", description: "描述内容..." },
      { title: "第二步", description: "描述内容..." },
      { title: "第三步", description: "描述内容..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域主标题
subtitle	string	-	副标题
steps	StepItem[]	-	步骤项列表

StepItem

属性	类型	说明
title	string	步骤标题
description	string	步骤描述

特性

• 醒目序列号：大号圆形数字标识，增强引导性。
• 卡片布局：每步独立卡片，带边框和阴影。
• 自适应网格：自动在 1-3 列之间切换。

---

主题覆盖

可覆盖变量

类名：mewx-cms-steps

变量名	用途	默认值
--mewx-cms-steps-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-steps-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-steps-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-steps-card-shadow	卡片阴影	var(--blocks-shadow-md)
--mewx-cms-steps-card-border	卡片边框	var(--blocks-border)
--mewx-cms-steps-number-bg	序列号背景	var(--blocks-primary-lightest)
--mewx-cms-steps-number-text	序列号文字色	var(--blocks-primary)
--mewx-cms-steps-item-heading-text	步骤标题色	var(--blocks-text-heading)

覆盖示例

/* 蓝色步骤 */
.blue-steps {
  --mewx-cms-steps-number-bg: 239 246 255;
  --mewx-cms-steps-number-text: 59 130 246;
  --mewx-cms-steps-item-heading-text: 37 99 235;
}

<StepsSection className="blue-steps" title="快速上手" subtitle="三步完成" steps={[...]} />