灯盒

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

医生和现场演示 * 由 前端供应

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

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号或以后 读取 开始 为完整的设置.

特征

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

文档

• 开始
• 手势
• 样式
• API 参考
• 实例: 聊天, (中文(简体) ), 列表库, (中文(简体) ), 故事, (中文(简体) ), 产品页面, (中文(简体) ), 旅行地图, (中文(简体) ), 飞到袋子, (中文(简体) ), 快来看, (中文(简体) ), 平面图, (中文(简体) ), 联系表

许可证

麻省理工学院. 由 前端供应。 。 。 .