← 全部模板

照片拼格 <PhotoMosaic />

标题下方一组不对称的图片网格,第一张占大格,其余错落排开,每张可带一个胶囊图注,逐张出现。

在示例演示里查看 →

分组
展示 · 3–5 张图一起看
组件
PhotoMosaic · #photo-mosaic
交互
build:图片逐张出现

适合

  • 展示一组同主题的场景、物种、作品
  • 用图片给一个数字做气氛铺垫

不适合

  • 每张图都要配说明文字:用 PolaroidWall 或 PhotoStack
  • 图片是界面截图:用 WindowStack

内容上限

1title ≤ 1 行 × 18 字或 2 行 × 10 字
2lead ≤ 50 字
3tiles 3–5 张,caption ≤ 12 字
4第一张放最重要的图,它最大

字段

字段类型
kicker / title / lead / sourceSlideBase同通用字段
tiles · 必填{ image, caption? }[]3–5 张图,每张一个 build 步骤

示例代码

<PhotoMosaic kicker="生物多样性" title="不到 1% 的海底,约 25% 的物种" tiles={[{ image: { src: fish, alt: '…' }, caption: '鱼群' }, …]} />