渐变步骤 Steps

概览

StepsSectionGradient 是一个视觉效果丰富的组件，通过大尺寸的序列号和悬停渐变效果，引导用户完成多阶段流程。

实时预览

只需三步，即刻上线

简单的流程，不简单的效果。

01

下载模板

从云端同步最新的 UI 组件包。

02

配置样式

通过简单的变量调整即可匹配品牌色。

03

快速分发

一键同步到全球边缘节点。

立即尝试

使用方法

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

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

属性说明 (Props)

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

特性

• 卡片悬停效果：鼠标移入时卡片会产生平滑的上移并显现渐变蒙层。
• 大号序列号：左上角带有醒目的数字标识，增强引导性。
• 自适应布局：在不同尺寸屏幕下保持最佳的间距比例。

---

主题覆盖

可覆盖变量

类名：mewx-cms-steps-gradient

变量名	用途	默认值
--mewx-cms-steps-gradient-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-steps-gradient-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-steps-gradient-card-bg	卡片背景	var(--blocks-bg-card)
--mewx-cms-steps-gradient-card-shadow	卡片阴影	var(--blocks-shadow-card)
--mewx-cms-steps-gradient-card-hover-shadow	卡片悬停阴影	var(--blocks-shadow-card-hover)
--mewx-cms-steps-gradient-card-radius	卡片圆角	var(--blocks-radius-2xl)
--mewx-cms-steps-gradient-number-bg	序列号背景	var(--blocks-bg-card)
--mewx-cms-steps-gradient-number-border	序列号边框	var(--blocks-primary-lighter)
--mewx-cms-steps-gradient-number-text	序列号文字色	var(--blocks-primary)
--mewx-cms-steps-gradient-number-radius	序列号圆角	var(--blocks-radius-lg)
--mewx-cms-steps-gradient-item-heading-text	步骤标题色	var(--blocks-text-heading)
--mewx-cms-steps-gradient-item-hover-heading-text	步骤标题悬停色	var(--blocks-primary)
--mewx-cms-steps-gradient-overlay-bg	悬停蒙层色	var(--blocks-primary-lightest)

覆盖示例

/* 蓝色渐变步骤 */
.blue-steps {
  --mewx-cms-steps-gradient-number-border: 191 219 254;
  --mewx-cms-steps-gradient-number-text: 59 130 246;
  --mewx-cms-steps-gradient-item-hover-heading-text: 37 99 235;
  --mewx-cms-steps-gradient-overlay-bg: 239 246 255;
}

<StepsSectionGradient className="blue-steps" title="只需三步" list={[...]} text="立即尝试" url="#" />