← All templates

扇形卡片 <FanCarousel />

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

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

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

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

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