Navigation

Dock menu

Dock menu: Ein unteres Dock, dessen Symbole ihre Größe vom Zeigerabstand annehmen, mit einer Beschriftung über dem Symbol unter dem Cursor und einem Punkt unter dem aktiven.

Workspace

Inbox14 unread, 3 waiting on your reply

Dock menu verwenden

Dock menu verwendet das Vorschauformat „breit“ mit der Theme-Einstellung „dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`magnification`	`number`	`1.8`	Von 1.2 bis 2.2; Schrittweite 0.05
`distance`	`number`	`140`	Von 80 bis 200; Schrittweite 5
`iconSize`	`number`	`44`	Von 36 bis 56; Schrittweite 2

Für welche Frameworks ist Dock menu verfügbar?

Dock menu ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Dock menu?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Dock menu erkennbar?

Der React-Quellcode von Dock menu enthält: native Elemente (nav); Attribute und Ereignisbehandler (aria-current, aria-hidden, aria-label, onKeyDown); Tastenvergleiche (ArrowLeft, End, Home). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Dock menu reduzierte Bewegung?

Dock menu liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Grouped magnify dock von Fieldbook aus der Kategorie Navigation.

2162Grouped magnify dockNavigationEin unteres Dock aus runden Symbolschaltflächen, die in zwei Cluster unterteilt sind, die größer werden, je näher der Zeiger an die einzelnen Cluster herankommt.

2382Magnifying icon dockNavigationEin Dock im macOS-Stil mit kreisförmigen Symbolschaltflächen, die sich gleichmäßig vergrößern, wenn sich der Zeiger ihnen nähert, und eine Beschriftung über dem aktiven Symbol anzeigen.

Standbild der UI-Komponente Bubble burst menu von Fieldbook aus der Kategorie Navigation.

2309Bubble burst menuNavigationEine schwebende Logo-Pille und ein Umschalter, die sich zu einer bildschirmfüllenden Überlagerung übergroßer Pillen-Links erweitern, die jeweils mit einer federnden Staffelung an ihren Platz platzen.

2188Magnifying icon dockNavigationEine Reihe von App-Symbolen in einer durchsichtigen Leiste, die größer werden, je näher der Zeiger einem einzelnen Symbol kommt, und wieder auf die normale Größe zurückkehren, wenn der Zeiger weggeht.

Standbild der UI-Komponente Auto height tabs von Fieldbook aus der Kategorie Navigation.

1916Auto height tabsNavigationEine Registerkartengruppe, deren Inhaltscontainer beim Wechseln der Registerkarten die Höhe stufenlos an die Größe jedes Panels anpasst, anstatt zu springen oder leeren Raum zu hinterlassen.

Standbild der UI-Komponente Card blur tabs von Fieldbook aus der Kategorie Navigation.

1928Card blur tabsNavigationTabs, eingerahmt von einer umrandeten Karte, deren Inhalt kurzzeitig verschwimmt und überblendet, wenn Sie zwischen den Panels wechseln, mit einer verschiebbaren Pille hinter der aktiven Tab-Beschriftung.