फ़ीचर्ड
डॉक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…
An icon dock whose labels fade in under the icon on hover and on keyboard focus.
<!--
The label under each icon is a real, permanent element - it is only faded and
nudged, never [hidden] and never display:none. That is deliberate: it is the
link's accessible name, so it must stay in the accessibility tree whether or
not a pointer happens to be hovering. A tooltip cannot do this job.
-->
<nav class="labeldock" aria-label="Dock">
<ul class="labeldock__list">
<li class="labeldock__item">
<a class="labeldock__link" href="/home" aria-current="page">
<svg class="labeldock__icon" 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 9-7.5 9 7.5" />
<path d="M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5" />
</svg>
<span class="labeldock__label">Home</span>
</a>
</li>
<li class="labeldock__item">
<a class="labeldock__link" href="/library">
<svg class="labeldock__icon" 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="M5 4h4v16H5zM11 4h3v16h-3zM16.5 4.5l3.5 15" />
</svg>
<span class="labeldock__label">Library</span>
</a>
</li>
<li class="labeldock__item">
<a class="labeldock__link" href="/search">
<svg class="labeldock__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.6-3.6" />
</svg>
<span class="labeldock__label">Search</span>
</a>
</li>
<li class="labeldock__item">
<a class="labeldock__link" href="/saved">
<svg class="labeldock__icon" 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="labeldock__label">Saved</span>
</a>
</li>
</ul>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
items | readonly LabeledDockItem[] | DEFAULT_ITEMS | रेंडर की जाने वाली आइटम की सूची। |
currentPath | string | - | वर्तमान पथ। इससे मेल खाने वाला आइटम सक्रिय पृष्ठ के रूप में चिह्नित होता है। |
onSelect | (id: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
ariaLabel | string | 'Dock' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The label is a permanent element that is merely faded - never `hidden`, never `display: none`. That is the point: it *is* the link's accessible name, so it has to stay in the accessibility tree whether or not a pointer happens to be nearby. Build the same thing as a tooltip and the icons become anonymous to every screen reader, which is the trap this component exists to avoid. The dock reserves the label row with `pb-6` and positions each label absolutely inside it, so revealing one costs no layout - without the reserved space every item would grow on hover and shove its neighbours sideways, and the dock would twitch under the pointer. The reveal fires on `group-focus-visible` as well as `group-hover`, because a keyboard user needs the label at least as much as a mouse user does. Labels are `pointer-events-none`; they overhang their neighbours and would otherwise swallow clicks meant for the icon beside them. Under reduced motion the fade lands immediately at the end state and only the slide is dropped - the label is information, so it is never the thing that gets removed.