ImageViewer

在页面级预览中查看图片或视频，提供前后切换与关闭操作，适合媒体详情浏览。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于图片的放大查看与组间导航。页面内普通图片展示用 Image；不要重写组件已有的缩放、关闭与键盘操作。

import { ImageViewer } from '@snowui-design-system/components';

属性	类型	默认值	示例	描述
`open`	`boolean`	`—`	`open`	手动模式下控制 Viewer 显示；与 `items/index` 一起省略时进入页面级自动模式
`items`	`ImageViewerItem[]`	`—`	`items={items}`	手动模式下提供预览项列表；省略时自动消费页面级预览状态
`index`	`number`	`—`	`index={42}`	手动模式下提供当前显示项索引；省略时自动消费页面级预览状态
`dismissMode`	`"button" \| "backdrop"`	`"backdrop"`	`dismissMode="button"`	关闭策略：backdrop 隐藏关闭按钮并允许点击媒体外空白关闭；button 显示关闭按钮且禁用空白关闭
`backdrop`	`BackdropVariant`	`"opaque"`	`backdrop={value}`	与 Dialog 共用遮罩视觉：opaque 为 10% 黑色遮罩，blur 在其上模糊背景，transparent 透明；不改变关闭策略。
`children`	`Snippet`	`—`	`<ImageViewer>Content</ImageViewer>`	显式组合控制按钮；提供后替换全部默认内置按钮
`parts`	`ComponentPartsOf<{ Button: typeof Button }>`	`—`	`parts={partsOptions}`	批量配置默认内置的 prev / next / close Button