Navigation

Scaling dot carousel

Scaling dot carousel: Ein Schiebekarussell, dessen aktive Karte sich in voller Größe befindet, während ihre Nachbarn leicht schrumpfen, gepaart mit Punktindikatoren, die sich zu beschrifteten Pillen erweitern.

Alpine Traverse

Ridge trails above the treeline, mapped for a two-day crossing.

Coastal Fog

Tide pools and cliffside paths hidden until the fog lifts.

Dune Fields

Shifting sand ridges best walked at first light.

Glacier Blue

Meltwater channels carve new routes into the ice each season.

Canyon Light

Afternoon sun turns the sandstone walls amber.

Northern Lights

Clear nights above 65 degrees, best viewed off the grid.

Scaling dot carousel verwenden

Scaling dot carousel 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
`loop`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`accentColor`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`slideCount`	`number`	`6`	Von 3 bis 8; Schrittweite 1

Für welche Frameworks ist Scaling dot carousel verfügbar?

Scaling dot carousel 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 Scaling dot carousel?

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

Welche Details zur Barrierefreiheit sind in Scaling dot carousel erkennbar?

Der React-Quellcode von Scaling dot carousel enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-current, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Scaling dot carousel reduzierte Bewegung?

Scaling dot carousel liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: delay: reduceMotion ? 0 : 0.08; springDot: reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 500, damping: 32 }; springScale: reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 320, damping: 28 }. 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 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 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.

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.

Standbild der UI-Komponente Chameleon pill navbar von Fieldbook aus der Kategorie Navigation.

2120Chameleon pill navbarNavigationEine Reihe von Navigationslinks in einer dunklen Kapsel, wobei sich der aktive Link in seine eigene Pille aufteilt und der Rest sich wieder um ihn herum schließt.

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

1528Dock menuNavigationEin 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.

Standbild der UI-Komponente Dropdown Action Menu von Fieldbook aus der Kategorie Navigation.

2344Dropdown Action MenuNavigationEin durch eine Schaltfläche ausgelöstes Dropdown-Menü mit gruppierten Elementen, rechtsbündigen Tastenkombinationsbeschriftungen und einer Zeile im Umschaltstil, die nach den meisten Auswahlmöglichkeiten automatisch geschlossen wird.