图片画廊 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 列表即可完成布局。

---

主题覆盖

可覆盖变量

类名：mewx-cms-image-gallery

变量名	用途	默认值
--mewx-cms-image-gallery-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-image-gallery-muted-text	描述文字色	var(--blocks-text-muted)
--mewx-cms-image-gallery-item-title-text	图片标题色	var(--blocks-text-heading)

覆盖示例

/* 暗色画廊 */
.dark-gallery {
  --mewx-cms-image-gallery-heading-text: 255 255 255;
  --mewx-cms-image-gallery-muted-text: 148 163 184;
  --mewx-cms-image-gallery-item-title-text: 241 245 249;
}

<ImageGallerySection className="dark-gallery" title="精选案例" list={[...]} />