翻书 <FlipBook />

一本摊开的书，每页一个大数字、标题和说明；每按一次 → 右页绕书脊 3D 翻过去，露出下一个跨页。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 叙事 · 2–4 个跨页
Component: FlipBook · #flip-book
Interaction: build: reveal 时每步翻一页；完成态显示最后一个跨页

Good for

讲一本书、一份档案、一段史料
4–8 个数字按两两一组讲

Avoid when

只有 1 个跨页：用 DuoCards
数字要互相比较：用图表

Content limits

1	spreads 2–4 个跨页
2	label ≤ 8 字；value ≤ 7 个字符
3	title ≤ 12 字；body ≤ 56 字
4	texture 只用 decor- 纸纹

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`spreads` · required	`{ left, right }[]`	每页 { label?, value?, title, body? }
`texture`	`string`	import 进来的 decor- 纸纹

Example

<FlipBook kicker="一本书" title="翻开古腾堡圣经" texture={paper} spreads={[{ left: { value: '1455', title: '…' }, right: { value: '42', title: '每页 42 行' } }, …]} source="…" />