- 分组
- 过程 · 边讲边揭开图片
- 组件
MaskReveal·#mask-reveal
适合
- 分阶段讲一个过程，最后看到全貌
- 想让一张氛围图随讲解逐步出现
不适合
- 要点超过 4 个：拆页或用 StepTrack
- 图片本身是证据：用 Screenshot
内容上限
| 1 | title 1–2 行 × ≤ 8 字 |
| 2 | steps 2–4 个：label ≤ 8 字，text ≤ 36 字 |
| 3 | shape: circle（默认）或 blinds |
| 4 | 配 build: reveal |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
steps · 必填 | { label, text }[] | 要点，每个一步 |
image · 必填 | string | import 进来的图片 |
alt · 必填 | string | 图片说明 |
shape | 'circle' | 'blinds' | 遮罩形状 |
credit | string | 图片来源 |
source | string | 事实出处 |
示例代码
<MaskReveal kicker="三个阶段" title={['从受热，', '到恢复或死去']} steps={[{ label: '热应激', text: '…' }, …]} image={coral} alt="…" shape="circle" />