小窗放大 <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="總覽檢視：所有頁面按順序排開"
/>