标签切换区块 <TabPanels />
一条横向标签栏，当前标签下有强调色下划线；下面一张大卡片显示当前标签的标题、说明、0–3 条要点，可在右侧放一个数字。每按一次 → 切到下一个标签。
- 分组
- 展开 · 同一主题的几个侧面
- 组件
TabPanels·#tab-panels- 交互
- 配 build: 'focus'：每按一次 → 选中下一个标签并换内容
适合
- 一个过程或一个主题有 3–5 个并列侧面，想一次只讲一个
- 每个侧面内容差不多多
不适合
- 需要同时比较各项：用 Matrix 或 CompareTable
- 每个标签要配截图：用 TabbedShot
- 打印 / 总览只显示 open 指定的那一个标签，其他标签内容看不到
内容上限
| 1 | tabs 3–5 个；tab ≤ 6 字或 ≤ 12 个拉丁字符 |
| 2 | title ≤ 20 字；body ≤ 80 字 |
| 3 | points 0–3 条，每条 ≤ 22 字 |
| 4 | stat.value ≤ 8 个字符，stat.label ≤ 12 字；有 stat 时 points 最多 2 条 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
tabs · 必填 | { tab, icon?, title, body, points?, stat? }[] | 标签与内容 |
open | number | 完整状态显示的标签，默认 0 |
示例代码
<TabPanels kicker="一个版本怎么来" title="从开发树到正式版" tabs={[{ tab: 'Rawhide', icon: 'branch', title: '新软件先进入开发树', body: '…' }, …]} />