画廊书架 <ShelfGallery />
3–4 张带图卡片排成一行，当前一张变宽、加强调描边，其余退后；每按一次 → 下一张来到前面。
Template and style descriptions are currently available in Chinese only.
- Group
- 场景 · 3–4 个带图的例子
- Component
ShelfGallery·#shelf-gallery- Interaction
- build: reveal 时第一张先在前面，之后每步换下一张；完整状态最后一张在前
Good for
- 3–4 个用途、场景、案例，每个配一张图
- 想逐个讲但让观众看到全部
Avoid when
- 没有图：用 PanelCards
- 图片是证据要看清细节：用 Screenshot
Content limits
| 1 | items 3–4 张 |
| 2 | image 只用 decor- 插图或真实截图，必须有 alt |
| 3 | title ≤ 8 字；body ≤ 36 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
items · required | { image: { src, alt, credit? }, title, body }[] | 从左到右 |
Example
<ShelfGallery kicker="用在哪里" title="…" items={[{ image: { src: lake, alt: '…', credit: '插图：AI 生成（示意）' }, title: '数据湖', body: '…' }, …]} />