- 分组
- 叙事 · 2–4 个跨页
- 组件
FlipBook·#flip-book- 交互
- build: reveal 时每步翻一页；完成态显示最后一个跨页
适合
- 讲一本书、一份档案、一段史料
- 4–8 个数字按两两一组讲
不适合
- 只有 1 个跨页：用 DuoCards
- 数字要互相比较：用图表
内容上限
| 1 | spreads 2–4 个跨页 |
| 2 | label ≤ 8 字；value ≤ 7 个字符 |
| 3 | title ≤ 12 字；body ≤ 56 字 |
| 4 | texture 只用 decor- 纸纹 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
spreads · 必填 | { left, right }[] | 每页 { label?, value?, title, body? } |
texture | string | import 进来的 decor- 纸纹 |
示例代码
<FlipBook kicker="一本书" title="翻开古腾堡圣经" texture={paper} spreads={[{ left: { value: '1455', title: '…' }, right: { value: '42', title: '每页 42 行' } }, …]} source="…" />