小窗放大 <MediaExpand />
截图先以小窗出现在标题旁，配 build: 'reveal' 时按一次 → 放大占满画面，标题让开，图上出现一句说明。跳页、截图和减少动态效果时直接显示放大后的画面。
- 分组
- 动效 · 一张截图或照片从小窗放大到整页
- 组件
MediaExpand·#media-expand- 交互
- 按 → 放大画面
适合
- 产品演示、案例：先让人认出画面，再看细节
- 一张图本身就是这一页的重点
不适合
- 截图需要标注细节：用 Screenshot
- 主体贴近图片边缘：放大时会被裁掉
内容上限
| 1 | title ≤ 2 行 × 10 字 |
| 2 | lead ≤ 40 字 |
| 3 | caption ≤ 24 字 |
| 4 | src 是真实截图或标明来源的照片 |
| 5 | 配 build: 'reveal'（只有 1 步） |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
src · 必填 | string | 图片 |
alt · 必填 | string | 图片说明 |
caption · 必填 | string | 放大后图上的一句话 |
source | string | 出处 |
示例代码
<MediaExpand
kicker="小窗放大"
title={['先认出画面，', '再看清细节']}
src={overview}
alt="总览视图截图"
caption="总览视图：所有页面按顺序排开"
/>