渐变步骤 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	-	底部按钮链接

特性

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