← 所有版型

标签切换卡 <TabSpec />

顶部一排标签，下面一张大规格卡（左边介绍、右边参数行）；每按一次 → 切到下一个标签，卡片换成下一项。

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

在範例簡報中查看 →

分組
并列 · 2–4 个选项逐个介绍
元件
TabSpec · #tab-spec
互動
build: reveal 时每步切换一个标签；完整状态（打印）显示最后一项

適合

  • 2–4 个产品、方案、开源项目逐个介绍
  • 每项有一段说明和 2–4 个参数

不適合

  • 要同时比较：用 CompareTable
  • 打印时需要每项都可见：拆成多页

內容上限

1items 2–4 个
2tab ≤ 12 个拉丁字符或 ≤ 6 字；name ≤ 16 字；body ≤ 60 字
3specs 2–4 行：label ≤ 4 字，value ≤ 22 字

欄位

欄位型別
kicker · 必填string标题上方的小节名，2–8 字
title · 必填string | string[]页面标题；传数组可手动断行，每项一行
leadstring一到两句导语，≤ 60 字
sourcestring事实出处；页面上有任何数据或事实时必填
hintReactNode页眉中间的操作提示，可用 <kbd>
items · 必填{ tab, name, body, specs: { label, value }[] }[]每个标签一项

範例程式碼

<TabSpec kicker="自建" title="…" items={[{ tab: 'Ceph RGW', name: 'Ceph 对象网关', body: '…', specs: [{ label: 'S3', value: '…' }] }, …]} source="…" />