- 分組
- 场景 · 3–4 个带图的例子
- 元件
ShelfGallery·#shelf-gallery- 互動
- build: reveal 时第一张先在前面，之后每步换下一张；完整状态最后一张在前
適合
- 3–4 个用途、场景、案例，每个配一张图
- 想逐个讲但让观众看到全部
不適合
- 没有图：用 PanelCards
- 图片是证据要看清细节：用 Screenshot
內容上限
| 1 | items 3–4 张 |
| 2 | image 只用 decor- 插图或真实截图，必须有 alt |
| 3 | title ≤ 8 字；body ≤ 36 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
items · 必填 | { image: { src, alt, credit? }, title, body }[] | 从左到右 |
範例程式碼
<ShelfGallery kicker="用在哪里" title="…" items={[{ image: { src: lake, alt: '…', credit: '插图：AI 生成（示意）' }, title: '数据湖', body: '…' }, …]} />