遮罩揭示 <MaskReveal />
左边 2–4 个编号要点;右边一张变灰的图,每讲一步,遮罩打开一点(圆形从中心扩大,或百叶窗逐组拉开),图片露出原色。
Template and style descriptions are currently available in Chinese only.
- Group
- 过程 · 边讲边揭开图片
- Component
MaskReveal·#mask-reveal
Good for
- 分阶段讲一个过程,最后看到全貌
- 想让一张氛围图随讲解逐步出现
Avoid when
- 要点超过 4 个:拆页或用 StepTrack
- 图片本身是证据:用 Screenshot
Content limits
| 1 | title 1–2 行 × ≤ 8 字 |
| 2 | steps 2–4 个:label ≤ 8 字,text ≤ 36 字 |
| 3 | shape: circle(默认)或 blinds |
| 4 | 配 build: reveal |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
steps · required | { label, text }[] | 要点,每个一步 |
image · required | string | import 进来的图片 |
alt · required | string | 图片说明 |
shape | 'circle' | 'blinds' | 遮罩形状 |
credit | string | 图片来源 |
source | string | 事实出处 |
Example
<MaskReveal kicker="三个阶段" title={['从受热,', '到恢复或死去']} steps={[{ label: '热应激', text: '…' }, …]} image={coral} alt="…" shape="circle" />