您的下一个营地
查看我们遍布全球五大洲的最新、最棒的营地目的地。
安装
示例
静态透镜
您的下一个营地
查看我们遍布全球五大洲的最新、最棒的营地目的地。
带默认位置的透镜
您的下一个营地
查看我们遍布全球五大洲的最新、最棒的营地目的地。
用法
import { Lens } from "@/components/magicui/lens";<Lens>
<img src="/images/lens-demo.jpg" alt="Lens Demo" />
</Lens>属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
children | React.ReactNode | - | 将被透镜放大的内容 |
zoomFactor | number | 1.3 | 透镜的放大倍数 |
lensSize | number | 170 | 透镜的像素大小（作为直径） |
position | 位置 | - | 透镜的当前位置 |
defaultPosition | 位置 | - | 透镜的初始位置 |
isStatic | boolean | false | 确定透镜是否保持固定位置 |
持续时间 | number | 0.1 | 透镜移动时动画的持续时间（秒） |
lensColor | string | - | 透镜的颜色（CSS 颜色值） |
ariaLabel | string | - | 透镜组件的辅助功能标签 |