整页图片 <FullBleed />
一张真实截图或照片铺满整页,底部渐暗,左下角白字标题和说明。SlideDef 上要设 tone: "dark"。
Template and style descriptions are currently available in Chinese only.
- Group
- 节奏 · 一张图占满整页
- Component
FullBleed·#full-bleed
Good for
- 一张图就能说明问题
- 章节之间的视觉停顿
Avoid when
- 图片不是真实截图或照片
- 需要标注图上的细节:用 Screenshot
Content limits
| 1 | src 是真实截图或照片,16:9 或更宽 |
| 2 | title ≤ 2 行 × 12 字 |
| 3 | caption ≤ 36 字 |
| 4 | source 写图片出处 |
| 5 | 必须设 tone: "dark" |
Fields
| Field | Type | |
|---|---|---|
src · required | string | 图片 |
alt · required | string | 图片说明 |
kicker · required | string | 小节名 |
title · required | string | string[] | 标题 |
caption | string | 说明 |
focus | string | 裁切焦点,CSS object-position |
source · required | string | 出处 |
Example
{ id: 'bleed', tone: 'dark', label: '总览', render: () => (
<FullBleed src={overview} alt="…" kicker="按 G" title={['一眼看完', '整份演示']} source="本项目截图" />
) }