照片叠放 <PhotoStack />
右边一摞白边照片,每按一次 → 就有一张新照片斜着落到最上面;左边对应的编号说明同时出现。
Template and style descriptions are currently available in Chinese only.
- Group
- 列举 · 3–4 项逐张翻开
- Component
PhotoStack·#photo-stack- Interaction
- build:照片逐张落到最上面
Good for
- 3–4 个并列的地点、案例、发现,每个有图和一句话
- 想制造“一张接一张”的节奏
Avoid when
- 需要同时比较所有图:用 PhotoMosaic
- 超过 4 项:拆页
Content limits
| 1 | title ≤ 2 行 × 8 字 |
| 2 | photos 3–4 张:title ≤ 10 字,body ≤ 32 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
photos · required | { image, title, body }[] | 照片和说明同一步出现 |
source | string | 事实出处 |
Example
<PhotoStack kicker="区域差异" title={['十年损失 14%,', '各地差得很远']} photos={[{ image: { src: a, alt: '…' }, title: '全球:-14%', body: '…' }, …]} />