您的下一个目的地
查看我们遍布全球五大洲最新、最佳的露营目的地。
安装
示例
静态 Lens
您的下一个目的地
查看我们遍布全球五大洲最新、最佳的露营目的地。
带默认位置的 Lens
您的下一个目的地
查看我们遍布全球五大洲最新、最佳的露营目的地。
用法
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 | 布尔值 | 否 | 确定该镜头是否保持固定位置 |
持续时间 | number | 0.1 | 该镜头移动时动画的持续时间（秒） |
lensColor | string | - | 该镜头的颜色（CSS 颜色值） |
ariaLabel | string | - | Lens 组件的可访问性标签 |