← 所有版型

叠卡推出 <CardStack />

卡片先叠成一摞放在右侧,每按一次 → 下一张从牌堆里滑出,落到自己在一排中的位置。

版型與風格的說明目前僅提供簡體中文。

在範例簡報中查看 →

分組
顺序 · 3–4 个阶段
元件
CardStack · #card-stack
互動
build: reveal 时第 0 步是一摞,之后每步推出一张

適合

  • 3–4 个依次发生的阶段、年份
  • 想让每一项“从一叠里抽出来”

不適合

  • 阶段之间没有先后:用 PanelCards
  • 超过 4 项:用 Timeline

內容上限

1cards 3–4 张
2mark ≤ 6 个字符
3title ≤ 10 字;body ≤ 44 字

欄位

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

範例程式碼

<CardStack kicker="一台机器" title="…" cards={[{ mark: '1799', title: '连续造纸机', body: '…' }, …]} source="…" />