功能展示 Showcase

概览

FeatureShowcase 通过大尺寸媒体（图/视频）与详尽文案的交替排列，深入展示复杂的功能点。

实时预览

深度功能揭秘

可视化编辑器

实时预览，拖拽即所得。让非技术人员也能轻松搭建专业页面。

立即体验

强大的自动化规则

内置 logic 引擎，根据条件动态切换展示组件。

查看示例

使用方法

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

const Example = () => (
  <FeatureShowcase
    title="产品亮点"
    list={[
      { title: "...", description: "...", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域大标题
list	FeatureShowcaseItem[]	[]	展示项列表

FeatureShowcaseItem

属性	类型	说明
title	string (HTML)	展示项标题 (支持 HTML)
description	string (HTML)	展示项描述 (支持 HTML)
mediaUrl	string	媒体 URL (图片/视频)
type	`“image"	"video"
url	string	按钮跳转链接
text	string	按钮文字

特性

• Z 字形布局：图片与文字左右交替，缓解视觉疲劳。
• 视频集成：支持本地视频预览和 YouTube 嵌入。
• 光致发光：媒体背后带有柔和的呼吸渐变背景。