安装
示例
自定义方向
自定义放大
用法
import { Dock, DockIcon } from "@/components/magicui/dock";
import { Home, Settings, Search } from "lucide-react";
<Dock>
<DockIcon>
<Home />
<Settings />
<Search />
</DockIcon>
</Dock>
属性
Dock
| 属性 | 类型 | 默认值 | 描述 |
|---|
className | string | - | 用于样式的自定义 CSS 类 |
children | ReactNode | - | 子元素 |
图标大小 | number | 40 | 图标大小 |
iconMagnification | number | 60 | 图标放大级别 |
iconDistance | number | 140 | 光标到放大图标的距离 |
方向 | string | "middle" | Dock 的方向 |
DockIcon
| 属性 | 类型 | 默认值 | 描述 |
|---|
size | number | 40 | 图标大小 |
magnification | number | 60 | 图标放大级别 |
distance | number | 140 | 光标到放大图标的距离 |
mouseX | any | - | 用于放大的鼠标 X 坐标 |
className | string | - | 用于样式的自定义 CSS 类 |
children | React.ReactNode | - | 子元素 |
props | PropsWithChildren | - | 附加属性 |
鸣谢