注目
ドック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 floating tab bar whose pill indicator slides to the active tab.
<!--
A tab bar with a sliding indicator. Shown with the first tab active; the
React/TypeScript variants move the indicator by translating it a whole tab
width per index. The pill is aria-hidden decoration - aria-current on the
active link is the announced state - and the slide is dropped under reduced
motion.
-->
<nav class="fixed bottom-6 left-1/2 w-72 max-w-[calc(100vw-2rem)] -translate-x-1/2 rounded-2xl border border-black/10 bg-white/90 p-1 shadow-[0_12px_32px_-12px_rgba(0,0,0,0.4)] backdrop-blur-md dark:border-white/10 dark:bg-gray-900/90" aria-label="Sections">
<div class="relative flex">
<span aria-hidden="true" class="absolute bottom-0 top-0 w-1/3 rounded-xl bg-blue-600/10 transition-transform duration-200 ease-out motion-reduce:transition-none dark:bg-blue-400/15"></span>
<a href="/home" aria-current="page" class="relative z-10 flex min-h-11 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1.5 text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 aria-[current=page]:text-blue-700 dark:text-gray-400 dark:focus-visible:ring-blue-400 dark:aria-[current=page]:text-blue-300">
<svg class="h-5 w-5" 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="text-[0.6875rem] font-medium leading-none">Home</span>
</a>
<a href="/trends" class="relative z-10 flex min-h-11 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1.5 text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 aria-[current=page]:text-blue-700 dark:text-gray-400 dark:focus-visible:ring-blue-400 dark:aria-[current=page]:text-blue-300">
<svg class="h-5 w-5" 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 20V10M10 20V4M16 20v-7M22 20H2" /></svg>
<span class="text-[0.6875rem] font-medium leading-none">Trends</span>
</a>
<a href="/saved" class="relative z-10 flex min-h-11 flex-1 flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-1.5 text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-600 aria-[current=page]:text-blue-700 dark:text-gray-400 dark:focus-visible:ring-blue-400 dark:aria-[current=page]:text-blue-300">
<svg class="h-5 w-5" 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="M7 4h10a1 1 0 0 1 1 1v15l-6-4-6 4V5a1 1 0 0 1 1-1Z" /></svg>
<span class="text-[0.6875rem] font-medium leading-none">Saved</span>
</a>
</div>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
tabs | readonly TabItem[] | DEFAULT_TABS | レンダリングする項目の配列。 |
defaultActive | string | - | 指標の現在値。フォーマット済みの文字列を渡します。 |
onSelect | (id: string) => void | - | ユーザーが選択したメニュー項目を引数に呼ばれます。 |
ariaLabel | string | 'Sections' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The indicator is `aria-hidden` decoration positioned by translating it a whole tab width per index; `aria-current` on the active link is the announced state, so the two cannot drift. The slide is dropped under reduced motion, and the bar is `max-w-[calc(100vw-2rem)]` so it holds at 320px.