Hover Gallery 悬浮画廊
Hover Gallery 适合做商品多视角缩略图。组件把多图预览结构收口成稳定 API：既能直接写children，也能切到items 数据驱动，并把导览遮罩和图片层样式统一收口到组件里。
何时使用
- 需要在商品卡片、作品集卡片里，用最轻的结构承载多张预览图。
- 想保持纯 CSS 的 hover 体验，但又不想在页面层重复写导览遮罩和图片映射逻辑。
- 同一套页面里基础静态写法，也有列表数据驱动写法，希望 API 可以平滑共存。
# How it works
第一张图片默认可见，其余图片会对应到横向 hover 分栏。组件现在可以直接输出这层导览遮罩。
# 基础用法
展示 children 写法。适合已经手写好图片节点的场景。
# 数据驱动
items 支持字符串、对象项和自定义 node，方便从接口数据或内容配置直接渲染。
# 自定义导览与图片层
导览文案、导览样式和图片 object-fit 都能在组件层统一配置，不需要再在页面里手工叠 grid。
这类组合更适合做详情页的角度预览，统一的 fit 和 imageClassName 可以把不同来源的图片先收敛到同一版式里。
# 商品卡片组合
展示卡片场景，但把图片映射交给 HoverGallery 自己处理。
Rue Field Cap
Cotton twill, matte buckle, small logo stitch.
4 angles preview¥199
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签，可选 figure 或 div | 'figure' | 'div' | 'figure' |
children | 直接传入图片节点；当 items 为空时作为渲染源 | any | - |
className | 追加到 hover-gallery 根节点的类名 | string | - |
fit | 统一控制 items 生成图片的 object-fit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' | - |
guideClassName | 追加到导览遮罩容器的类名 | string | - |
guideItemClassName | 追加到每个导览分栏的类名 | string | - |
guideLabels | 覆盖导览遮罩文案；长度通常为图片数量减一 | ReadonlyArray<any> | - |
imageClassName | 统一追加到 items 生成图片上的类名 | string | - |
items | 数据驱动模式，支持字符串 src、对象项或自定义 node | ReadonlyArray<string | HoverGalleryItem | any> | - |
showGuide | 显示与 hover 区域对齐的导览遮罩 | boolean | false |
wrapperClassName | showGuide 开启时追加到外层叠放容器的类名 | string | - |