← 全部模板

照片叠放 <PhotoStack />

右边一摞白边照片,每按一次 → 就有一张新照片斜着落到最上面;左边对应的编号说明同时出现。

在示例演示里查看 →

分组
列举 · 3–4 项逐张翻开
组件
PhotoStack · #photo-stack
交互
build:照片逐张落到最上面

适合

  • 3–4 个并列的地点、案例、发现,每个有图和一句话
  • 想制造“一张接一张”的节奏

不适合

  • 需要同时比较所有图:用 PhotoMosaic
  • 超过 4 项:拆页

内容上限

1title ≤ 2 行 × 8 字
2photos 3–4 张:title ≤ 10 字,body ≤ 32 字

字段

字段类型
kicker · 必填string小节名
title · 必填string | string[]标题
photos · 必填{ image, title, body }[]照片和说明同一步出现
sourcestring事实出处

示例代码

<PhotoStack kicker="区域差异" title={['十年损失 14%,', '各地差得很远']} photos={[{ image: { src: a, alt: '…' }, title: '全球:-14%', body: '…' }, …]} />