Small window expand <MediaExpand />
The screenshot first appears as a small window next to the title; with build: 'reveal', one press expands it to fill the slide, the title steps aside and a caption appears over the image. When jumping to the slide, printing or with reduced motion, the expanded view is shown directly.
- Group
- Motion · a screenshot or photo grows from a small window to the full slide
- Component
MediaExpand·#media-expand- Interaction
- Press → expand the image
Good for
- Product demos and cases: let people recognise the screen first, then look at the details
- One image is the point of the slide
Avoid when
- The screenshot needs annotations: use Screenshot
- The subject sits near the image edge and would be cropped when expanded
Content limits
| 1 | title ≤ 2 lines × 10 chars |
| 2 | lead ≤ 40 chars |
| 3 | caption ≤ 24 chars |
| 4 | src is a real screenshot or a photo with its source stated |
| 5 | Use build: 'reveal' (1 step only) |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | Section label |
title · required | string | string[] | Title |
lead | string | Lead |
src · required | string | Image |
alt · required | string | Image description |
caption · required | string | One line over the image once it is expanded |
source | string | Source |
Example
<MediaExpand
kicker="小窗放大"
title={['先认出画面，', '再看清细节']}
src={overview}
alt="总览视图截图"
caption="总览视图：所有页面按顺序排开"
/>