← 全部模板

扇形卡片 <FanCarousel />

卡片像一手牌一样沿圆弧展开;每按一次 → 扇面转动,下一张立到正中并抬起。

在示例演示里查看 →

分组
并列 · 4–6 个要点逐个讲
组件
FanCarousel · #fan-carousel
交互
build: reveal 时第 0 步扇面收拢,之后每步转到下一张;完成态停在最后一张

适合

  • 4–6 个并列的小知识、数字
  • 想让一页更像“道具”而不是表格

不适合

  • 要同时比较所有项:用 StatRow 或 PanelCards
  • 每项文字超过 30 字

内容上限

1cards 4–6 张
2mark ≤ 6 个字符;title ≤ 8 字;body ≤ 30 字
3icon 用 icon-set 名称

字段

字段类型
kicker · 必填string标题上方的小节名,2–8 字
title · 必填string | string[]页面标题;传数组可手动断行,每项一行
leadstring一到两句导语,≤ 60 字
sourcestring事实出处;页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示,可用 <kbd>
cards · 必填{ icon, mark, title, body }[]扇面上的卡

示例代码

<FanCarousel kicker="尺寸" title="一张 A4 背后的五个数字" cards={[{ icon: 'letter', mark: '1786', title: '最早的设想', body: '…' }, …]} source="…" />