COMPONENT 65 · Content & Media

图片画廊

Image Gallery

也叫Photo GalleryThumbnail Grid照片墙

以网格或缩略图集合展示多张相关图片。

Displays a collection of related images as a grid or set of thumbnails.

ANATOMY & USAGE

结构与使用建议

组成部分

画廊容器
缩略图
图片说明

适合使用

用户需要纵览、选择或打开多张图片时。

不建议使用

图片只有一张或必须按严格线性顺序观看时。

键盘与无障碍

每张图具有恰当替代文本；打开大图使用真实按钮或链接并显示可见焦点。

DESCRIBE IT TO AI

这样告诉编程助手

实现图片画廊（Image Gallery）：以网格或缩略图集合展示多张相关图片。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack" aria-label="旅行照片">
  <figure id="gallery-preview">
    <div class="gallery-photo" role="img" aria-label="蓝色海面">🌊</div>
    <figcaption>海边</figcaption>
  </figure>
  <ul class="gallery">
    <li>
      <button type="button" data-symbol="🌊" data-label="海边" aria-pressed="true">海边</button>
    </li>
    <li>
      <button type="button" data-symbol="🏞️" data-label="山谷" aria-pressed="false">山谷</button>
    </li>
  </ul>
</section>