- 分组
- 开场 · 第 1 页
- 组件
Cover·#cover- 交互
- 鼠标移动时数字轻微跟随;数字逐位从遮罩中升起。
适合
- 整份演示的第一页
- 主题能浓缩成一个数字或短代号:版本号、年份、季度、排名
不适合
- 主题没有能代表它的数字:此时用 numeral 放首字母或年份后两位,而不是硬凑
- 章节分隔页:分隔页用 Teaser 更克制
内容上限
| 1 | numeral 1–4 个字符;3–4 个字符时字号自动缩小 |
| 2 | title 1–2 行,每行 ≤ 12 个字符;subtitle ≤ 10 个字符,并且比 numeral 窄,否则会贴近大数字 |
| 3 | facts 2–4 项,每个 value ≤ 10 个字符 |
| 4 | note ≤ 2 行 |
| 5 | 没有 source 字段:封面上的事实必须在后面某页出现并带出处 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小标签 |
title · 必填 | string | string[] | 主标题 |
subtitle | string | 衬线斜体第二行,自动加引号,适合代号、口号 |
lead · 必填 | string | 一句话说明这份演示讲什么,≤ 60 字 |
facts · 必填 | { label, value }[] | 底部关键事实 |
numeral · 必填 | string | 右侧超大数字 |
note | string | string[] | 右上角小注,适合冷知识 |
hint | ReactNode | 页眉操作提示,封面建议写“按 → 翻页” |
示例代码
<Cover
kicker="Release Briefing · 版本发布解读"
title="Lumen 13"
subtitle="aurora"
lead="2025 年 8 月 9 日发布的新稳定版。这份简报梳理它的主要变化与升级路径。"
facts={[
{ label: '发布', value: '2025.08.09' },
{ label: '支持', value: '5 年' },
{ label: '官方架构', value: '7 个' },
]}
numeral="13"
note={['代号 aurora', '取自北方夜空里的极光']}
/>