For Tailwind CSS v3 docs, click here.

Dock

A macOS-style dock with magnifying icons as you hover over them.

通过 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/dock.json"

手动安装

在同一个文件中,复制并粘贴以下代码:

Dock.vue
DockIcon.vue
DockSeparator.vue
index.ts
types.ts
injectionKeys.ts

API

Dock

Prop 名称类型描述
classstringAdditional classes to apply to the dock container.
magnificationnumberMagnification factor for the dock icons on hover (default: 60).
distancenumberDistance from the icon center where magnification applies.
directionstringAlignment of icons (top, middle, bottom) (default: middle).
orientationstringOrientation of Dock (vertical, horizontal) (default: horizontal).
Slot Name描述
defaultDock Dock or other child components to be displayed.

DockIcon

Slot Name描述
defaultComponent or icon to be displayed inside the dock icon.

感谢

  • Credits to macOS Dock for the design inspiration and the fantastic hover magnification effect.