← 全部模板

标签切换卡 <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="…" />