叠卡推出 <CardStack />
卡片先叠成一摞放在右侧,每按一次 → 下一张从牌堆里滑出,落到自己在一排中的位置。
Template and style descriptions are currently available in Chinese only.
- Group
- 顺序 · 3–4 个阶段
- Component
CardStack·#card-stack- Interaction
- build: reveal 时第 0 步是一摞,之后每步推出一张
Good for
- 3–4 个依次发生的阶段、年份
- 想让每一项“从一叠里抽出来”
Avoid when
- 阶段之间没有先后:用 PanelCards
- 超过 4 项:用 Timeline
Content limits
| 1 | cards 3–4 张 |
| 2 | mark ≤ 6 个字符 |
| 3 | title ≤ 10 字;body ≤ 44 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名,2–8 字 |
title · required | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
cards · required | { mark, title, body }[] | 按出场顺序排 |
Example
<CardStack kicker="一台机器" title="…" cards={[{ mark: '1799', title: '连续造纸机', body: '…' }, …]} source="…" />