分段截图 <TabbedShot />
居中的标题和导语，下面一个分段切换器，再下面一张大截图。点击分段切换截图，打开时显示第一张。
Template and style descriptions are currently available in Chinese only.
- Group
- 产品 · 一个产品的 2–4 个界面
- Component
TabbedShot·#tabbed-shot- Interaction
- 点击分段切换截图
Good for
- 一个产品有几个主要界面
- 截图本身就是论据
Avoid when
- 没有真实截图
- 截图需要标注细节：用 Screenshot
Content limits
| 1 | tabs 2–4 个，label ≤ 6 字 |
| 2 | 每个 src 都是真实截图 |
| 3 | title ≤ 22 字 |
| 4 | lead ≤ 50 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 小节名，2–8 字 |
title · required | string | string[] | 标题；数组手动断行 |
lead | string | 一两句导语，≤ 60 字 |
source | string | 事实出处 |
tabs · required | { label, icon?, src, alt }[] | 分段和截图 |
Example
<TabbedShot
kicker="三种视图"
title="写、挑、放，各有一个入口"
tabs={[{ label: '组件库', src: kitEntry, alt: '…' }, { label: '放映', src: slide, alt: '…' }]}
/>