← 全部模板

分段截图 <TabbedShot />

居中的标题和导语，下面一个分段切换器，再下面一张大截图。点击分段切换截图，打开时显示第一张。

分组: 产品 · 一个产品的 2–4 个界面
组件: TabbedShot · #tabbed-shot
交互: 点击分段切换截图

适合

一个产品有几个主要界面
截图本身就是论据

不适合

没有真实截图
截图需要标注细节：用 Screenshot

内容上限

1	tabs 2–4 个，label ≤ 6 字
2	每个 src 都是真实截图
3	title ≤ 22 字
4	lead ≤ 50 字

字段

字段	类型
`kicker` · 必填	`string`	小节名，2–8 字
`title` · 必填	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`tabs` · 必填	`{ label, icon?, src, alt }[]`	分段和截图

示例代码

<TabbedShot
  kicker="三种视图"
  title="写、挑、放，各有一个入口"
  tabs={[{ label: '组件库', src: kitEntry, alt: '…' }, { label: '放映', src: slide, alt: '…' }]}
/>