फ़ीचर्ड
डॉक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 vertical dock pinned to the left edge, with an active indicator that hangs off aria-current.
<nav class="rail" aria-label="Workspace">
<ul class="rail__list">
<li class="rail__item">
<a class="rail__link" href="/inbox" aria-current="page">
<svg class="rail__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="M4 13h4l1.5 3h5L16 13h4" />
<path d="M5.5 5h13l2.5 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5Z" />
</svg>
<span class="rail__label">Inbox</span>
</a>
</li>
<li class="rail__item">
<a class="rail__link" href="/projects">
<svg class="rail__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="M4 7a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z" />
</svg>
<span class="rail__label">Projects</span>
</a>
</li>
<li class="rail__item">
<a class="rail__link" href="/insights">
<svg class="rail__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="M4 20V10M10 20V4M16 20v-7M22 20H2" />
</svg>
<span class="rail__label">Insights</span>
</a>
</li>
<li class="rail__item">
<a class="rail__link" href="/team">
<svg class="rail__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="9" cy="8" r="3" />
<path d="M3 19a6 6 0 0 1 12 0M16 5.5a3 3 0 0 1 0 5.8M17 19a6 6 0 0 0-1.5-4" />
</svg>
<span class="rail__label">Team</span>
</a>
</li>
<li class="rail__item">
<a class="rail__link" href="/settings">
<svg class="rail__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="12" cy="12" r="3" />
<path d="M12 3v2M12 19v2M4.2 7.5l1.7 1M18.1 15.5l1.7 1M4.2 16.5l1.7-1M18.1 8.5l1.7-1" />
</svg>
<span class="rail__label">Settings</span>
</a>
</li>
</ul>
</nav>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
items | readonly RailItem[] | DEFAULT_ITEMS | रेंडर की जाने वाली आइटम की सूची। |
currentPath | string | - | वर्तमान पथ। इससे मेल खाने वाला आइटम सक्रिय पृष्ठ के रूप में चिह्नित होता है। |
onSelect | (id: string) => void | - | यूज़र द्वारा चुने गए मेन्यू आइटम के साथ चलता है। |
ariaLabel | string | 'Workspace' | बटन का एक्सेसिबल नाम। सिर्फ़ आइकन वाले बटन के लिए ज़रूरी है। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
This is a dock, not a sidebar: it hugs its own content and floats at the vertical centre, so a short page and a long one get the same rail in the same place - no full-height column, no layout to reserve. The indicator bar and the tinted pill are both styled from `[aria-current="page"]`, which means the marker physically cannot point at a different item than the one a screen reader calls current. That is the entire reason to style off the attribute instead of an `.is-active` class. Every link is icon-only, so every link carries a clipped `<span>` as its accessible name - an icon rail without those is a row of unlabelled buttons to anyone not looking at it. Moving the rail to the right edge means swapping `left-4` for `right-4` and flipping the indicator to `-right-2`; that indicator is the only thing that knows which side it is on. On narrow screens, hide it and reach for the bottom tab bar instead - a left rail and a thumb do not meet.