多图汇聚 <ConvergeShots />
3–4 张图先并排展示、各带一个标签。配 build: 'reveal' 时第一次按 → 它们向中间汇聚，焦点图放大到前面，其余叠在后面；第二次按出现说明。跳页时直接显示汇聚后的画面。
- 分组
- 动效 · 几张图并排，汇聚成一张焦点图
- 组件
ConvergeShots·#converge-shots- 交互
- 按 → 汇聚到焦点图，再按出现说明
适合
- 几个页面或视图最后都落到一个结果
- 先展示范围，再聚焦到要讲的那一张
不适合
- 每张图都要细讲：用 Screenshot 或拆页
- 图片比例差别很大
内容上限
| 1 | shots 3–4 张，最好都是 16:9 |
| 2 | label ≤ 10 字 |
| 3 | caption ≤ 36 字 |
| 4 | 页标题 ≤ 22 字 |
| 5 | lead ≤ 40 字 |
| 6 | 截图当证据，照片只营造氛围 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
shots · 必填 | { src, alt, label }[] | 图片 |
focus | number | 最后放在前面的那张，默认 0 |
caption | string | 第二次按出现的说明 |
source | string | 出处 |
示例代码
<ConvergeShots
kicker="多图汇聚"
title="四个入口，一份演示"
shots={[{ src: slide, alt: '…', label: '放映' }, { src: overview, alt: '…', label: '总览' }, { src: kit, alt: '…', label: '组件库' }]}
caption="…"
/>