# @frontendsupply/lightbox 中文文档

规范地址：https://npmcn.com/package/%40frontendsupply/lightbox/

版本：0\.3\.1
npm 元数据更新时间：2026-10-31T20:16:47.222Z
中文译文更新时间：2026-11-15T17:12:11.130Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frontendsupply/lightbox
原文对照：https://npmcn.com/package/%40frontendsupply/lightbox/?lang=original
项目主页：https://lightbox.frontend.supply/
源码仓库：https://github.com/frontendsupply/lightbox

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：78.1 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=19，motion \>=12，react-dom \>=19，@base-ui/react ^1\.9\.0
- 首次发布：2026-10-20T11:53:53.621Z
- 最新版本发布：2026-10-31T20:16:47.070Z
- 近 30 天下载量：2036（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

无头回放灯盒和图像取景器有剪接缩放,刷取,拉取去除和形态动画. 建于基座UI和Motion上.

## 安装

```sh
npm install @frontendsupply/lightbox
```

也可以使用：`pnpm add @frontendsupply/lightbox`、`yarn add @frontendsupply/lightbox`、`bun add @frontendsupply/lightbox`

## README

# 灯盒

无头回放灯箱和图像取景器,并有剪接缩放,刷取并拉出去除. 缩略图变形为全 照片和回来。 建造在 [基础UI](https://base-ui.com/) 财务报告和审定财务报表 [动议](https://motion.dev/)它只运送行为,不 CSS,所以画廊看起来像你的产品,而不是插件.

**[医生和现场演示](https://lightbox.frontend.supply/)** \* 由 [前端供应](https://frontend.supply/)

```bash
pnpm add @frontendsupply/lightbox @base-ui/react motion
```

```tsx
import { Lightbox } from '@frontendsupply/lightbox'

<Lightbox.Root items={photos}>
  {photos.map((photo, i) => (
    <Lightbox.Trigger key={photo.src} index={i}>
      <img src={photo.thumb} alt={photo.alt} className="aspect-square object-cover" />
    </Lightbox.Trigger>
  ))}
  <Lightbox.Portal>
    <Lightbox.Backdrop className="bg-black" />
    <Lightbox.Popup>
      <Lightbox.Viewport />
      <Lightbox.Close>Close</Lightbox.Close>
    </Lightbox.Popup>
  </Lightbox.Portal>
</Lightbox.Root>
```

需要回放19号或以后 读取 [开始](https://lightbox.frontend.supply/docs) 为完整的设置.

## 特征

-   **打开并关闭** 那个非作物 `object-fit: cover` 缩略图和插入角半径
-   **本地刷取**: 一个真实的 `scroll-snap` 滚动器,所以触摸和跟踪盘的动力来自OS. 鼠标拖曳 来自 [花花木马](https://www.blossom-carousel.com/),只有在有鼠标时才装入
-   **键盘、音轨板、轮子、双塔和键盘缩放**有橡胶带和惯性平板
-   **撤职** 以速度带入近动画 紧贴下方
-   **页面滚动同步**:观看者后面的一页跟着走,所以关闭了右拇指上的土地
-   **可访问**:焦点陷阱,滚动锁, `Esc`,焦点返回( Base UI Dialog) 和减速后退
-   **无头**: 通过数据属性和一个 CSS 变量,以 Tailwind 、 CSS 模块或其他方式对每个部分进行样式

## 文档

-   [开始](https://lightbox.frontend.supply/docs)
-   [手势](https://lightbox.frontend.supply/docs/gestures)
-   [样式](https://lightbox.frontend.supply/docs/styling)
-   [API 参考](https://lightbox.frontend.supply/docs/api)
-   实例: [聊天](https://lightbox.frontend.supply/docs/examples/chat), (中文(简体) ), [列表库](https://lightbox.frontend.supply/docs/examples/listing), (中文(简体) ), [故事](https://lightbox.frontend.supply/docs/examples/stories), (中文(简体) ), [产品页面](https://lightbox.frontend.supply/docs/examples/product), (中文(简体) ), [旅行地图](https://lightbox.frontend.supply/docs/examples/map), (中文(简体) ), [飞到袋子](https://lightbox.frontend.supply/docs/examples/bag), (中文(简体) ), [快来看](https://lightbox.frontend.supply/docs/examples/quick-look), (中文(简体) ), [平面图](https://lightbox.frontend.supply/docs/examples/floor-plan), (中文(简体) ), [联系表](https://lightbox.frontend.supply/docs/examples/contact-sheet)

## 许可证

麻省理工学院. 由 [前端供应](https://frontend.supply/)。 。 。 .

## 常见问题

### @frontendsupply/lightbox 是什么？

无头回放灯盒和图像取景器有剪接缩放,刷取,拉取去除和形态动画\. 建于基座UI和Motion上\.

### 如何安装 @frontendsupply/lightbox？

在项目目录运行 npm install @frontendsupply/lightbox，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19）、motion（\>=12）、react-dom（\>=19）、@base-ui/react（^1\.9\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frontendsupply/lightbox 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frontendsupply/lightbox 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @frontendsupply/lightbox 可以商用吗？

@frontendsupply/lightbox 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @frontendsupply/lightbox 的下载量有多少？

根据 npm 官方下载统计，@frontendsupply/lightbox 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,036 次，日均约 68 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frontendsupply/lightbox 还在维护吗？

最新版本 0\.3\.1 发布于 2026/11/01（15 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。