图片画廊 Gallery

概览

ImageGallerySection 提供了一个简单而强大的网格布局，用于展示作品集、团队照片 or 产品细节图。

实时预览

精选案例展示

遍布全球的成功实践。

作品 A

作品 B

作品 C

使用方法

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

const Example = () => (
  <ImageGallerySection
    title="我们的相册"
    list={[
      { title: "图片 1", mediaUrl: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	画廊标题
description	string	-	副标题描述
list	ImageGalleryItem[]	[]	图片项列表

ImageGalleryItem

属性	类型	说明
title	string	图片下方的标题
mediaUrl	string	图片 URL
alt	string	替代文本

特性

• 自动响应式：自动根据屏幕宽度在 1、2、3 列之间切换。
• 圆角设计：所有图片默认应用一致的圆角，保证视觉统一。
• 配置驱动：通过简单的 JSON 列表即可完成布局。