← All templates

标签切换卡 <TabSpec />

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

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group
并列 · 2–4 个选项逐个介绍
Component
TabSpec · #tab-spec
Interaction
build: reveal 时每步切换一个标签;完整状态(打印)显示最后一项

Good for

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

Avoid when

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

Content limits

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

Fields

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

Example

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