Dock
dock放大坞 · macOS 式按鼠标距离放大图标(motion 弹簧 + context 下发 mouseX)
用法
基础用法
DockIcon 包裹图标，鼠标靠近时图标按水平距离放大（macOS 放大坞效果）。
tsx
<Dock>
<DockIcon><Home className="size-5" /></DockIcon>
<DockIcon><Search className="size-5" /></DockIcon>
<DockIcon><Bell className="size-5" /></DockIcon>
<DockIcon><Settings className="size-5" /></DockIcon>
<DockIcon><User className="size-5" /></DockIcon>
</Dock>更强放大
magnification 调高峰值尺寸、distance 调大影响范围，得到更夸张的放大效果。
tsx
<Dock magnification={84} distance={160}>
<DockIcon><Home className="size-5" /></DockIcon>
<DockIcon><Search className="size-5" /></DockIcon>
<DockIcon><Bell className="size-5" /></DockIcon>
</Dock>自定义静息尺寸
iconSize 设定未悬停时的基础尺寸，适配更紧凑或更宽松的坞。
tsx
<Dock iconSize={32}>
<DockIcon><Home className="size-4" /></DockIcon>
<DockIcon><Search className="size-4" /></DockIcon>
<DockIcon><Settings className="size-4" /></DockIcon>
</Dock>何时用
页面底部/侧边的悬浮快捷入口栏，鼠标靠近时图标按距离弹性放大，营造 macOS Dock 观感，多用于个人站、作品集、桌面风格 demo。常规站点导航用 Navbar；功能性下拉/菜单条用 Menu / Menubar。
导入
ts
import { Dock, DockIcon } from "@hulianui/ui"Props
Dock
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| magnification | number | — | 鼠标靠近时图标放大到的峰值尺寸(px) |
| distance | number | — | 放大影响范围半径(px) |
| iconSize | number | — | 静息图标尺寸(px) |
| className | string | — | — |
DockIcon
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| className | string | — | — |
Slots
Dock
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 一组 DockIcon |
DockIcon
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 单个图标内容 |
禁忌 / 坑
- 候选坑 skill（macos-dock-icon-needs-baked-squircle-margin、tauri-macos-hide-to-tray）均针对原生 macOS / Tauri 的系统 Dock，与本 React 组件无关，不适用。
- 放大依赖随鼠标移动下发的
mouseX（context + motion 弹簧），是纯客户端交互；图标统一用固定尺寸（如size-5）以便放大动画一致。
相关
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar