← 全部模板

叠卡推出 <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="…" />