← All templates

叠卡推出 <CardStack />

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

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
顺序 · 3–4 个阶段
Component
CardStack · #card-stack
Interaction
build: reveal 时第 0 步是一摞,之后每步推出一张

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

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