模型对照卡 <ParadigmCards />
2–3 张并排卡片,每张顶部有一个小结构示意(目录树 / 块格 / 扁平桶),下面是对齐的属性行;每按一次 → 出现一张,可强调其中一张。
版型與風格的說明目前僅提供簡體中文。
- 分組
- 对比 · 2–3 种做法的结构
- 元件
ParadigmCards·#paradigm-cards- 互動
- build: reveal 时每步出现一张卡
適合
- 比较 2–3 种组织数据或做事的模型
- 每种模型用同样的几个维度描述
不適合
- 维度超过 4 个或要打分:用 CompareTable
- 结构示意和内容无关:用 PanelCards
內容上限
| 1 | cards 2–3 张 |
| 2 | name ≤ 8 字;tagline ≤ 16 字 |
| 3 | rows 2–4 行:label ≤ 4 字,value ≤ 16 字;各卡的 label 顺序一致 |
| 4 | shape 只能是 tree / blocks / flat |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名,2–8 字 |
title · 必填 | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
cards · 必填 | { shape, name, tagline, rows: { label, value }[] }[] | 每种模型一张 |
focus | number | 强调的卡片下标 |
範例程式碼
<ParadigmCards kicker="先分清三种" title="块、文件、对象" focus={2} cards={[{ shape: 'blocks', name: '块存储', tagline: '…', rows: [{ label: '组织', value: '…' }] }, …]} source="…" />