安装
示例
自定义方向
自定义放大
用法
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 | - | 子元素 |
iconSize | number | 40 | 图标大小 |
iconMagnification | number | 60 | 图标放大级别 |
iconDistance | number | 140 | 光标到图标的放大距离 |
direction | string | "middle" | 停靠栏方向 |
DockIcon
| 属性 | 类型 | 默认值 | 描述 |
|---|
大小 | number | 40 | 图标大小 |
magnification | number | 60 | 图标放大级别 |
distance | number | 140 | 光标到图标的放大距离 |
mouseX | 任意 | - | 用于放大的鼠标 X 坐标 |
className | string | - | 用于样式设置的自定义 CSS 类 |
children | React.ReactNode | - | 子元素 |
props | PropsWithChildren | - | 附加属性 |
致谢