注目
ドックmacOS Magnify Dock
A floating icon dock whose items swell under the pointer, the neighbours lifting less than the one you are on.
#dock#magnify#hover
6 個のフレームワーク上級
Loading…
A frosted-glass icon dock that lifts each item on hover, gated to fine pointers.
<!--
A frosted-glass dock. The surface leans on backdrop-blur, but the /30 white
fill stays legible if backdrop-filter is unsupported. The hover lift is gated
to (pointer: fine) so a touch device never inherits a stuck hover state.
-->
<nav
class="fixed bottom-6 left-1/2 inline-block -translate-x-1/2 rounded-2xl border border-white/40 bg-white/30 p-2 shadow-[0_12px_40px_-12px_rgba(0,0,0,0.5)] backdrop-blur-xl dark:border-white/10 dark:bg-white/5"
aria-label="Dock"
>
<ul class="flex items-center gap-1">
<li>
<a href="/home" aria-current="page" class="flex h-11 w-11 items-center justify-center rounded-xl text-gray-800 transition duration-150 ease-out hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60 aria-[current=page]:text-blue-700 motion-reduce:transition-none [@media(pointer:fine)]:hover:-translate-y-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900 dark:aria-[current=page]:text-blue-300">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M3 10.5 12 3l9 7.5M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5" /></svg>
<span class="sr-only">Home</span>
</a>
</li>
<li>
<a href="/search" class="flex h-11 w-11 items-center justify-center rounded-xl text-gray-800 transition duration-150 ease-out hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60 motion-reduce:transition-none [@media(pointer:fine)]:hover:-translate-y-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm9 16-3.6-3.6" /></svg>
<span class="sr-only">Search</span>
</a>
</li>
<li>
<a href="/explore" class="flex h-11 w-11 items-center justify-center rounded-xl text-gray-800 transition duration-150 ease-out hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60 motion-reduce:transition-none [@media(pointer:fine)]:hover:-translate-y-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm3.5 5.5-2 5-5 2 2-5Z" /></svg>
<span class="sr-only">Explore</span>
</a>
</li>
<li>
<a href="/messages" class="flex h-11 w-11 items-center justify-center rounded-xl text-gray-800 transition duration-150 ease-out hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60 motion-reduce:transition-none [@media(pointer:fine)]:hover:-translate-y-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-5 4Z" /></svg>
<span class="sr-only">Messages</span>
</a>
</li>
<li>
<a href="/profile" class="flex h-11 w-11 items-center justify-center rounded-xl text-gray-800 transition duration-150 ease-out hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white/60 motion-reduce:transition-none [@media(pointer:fine)]:hover:-translate-y-1 dark:text-gray-100 dark:hover:bg-white/10 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 4.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7ZM5 20a7 7 0 0 1 14 0" /></svg>
<span class="sr-only">Profile</span>
</a>
</li>
</ul>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items | readonly GlassDockItem[] | DEFAULT_ITEMS | レンダリングする項目の配列。 |
onSelect | (id: string) => void | - | ユーザーが選択したメニュー項目を引数に呼ばれます。 |
ariaLabel | string | 'Dock' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The surface is backdrop-blur over a /30 white fill, so it degrades to a legible translucent panel where backdrop-filter is unsupported. The hover lift is gated to `[@media(pointer:fine)]` and dropped under reduced motion, so a touch device never inherits a stuck hover.