Layout

Focus scroll list

Focus scroll list: Eine scrollbare Warteschlange, deren Zeilen in voller Größe und opacity erscheinen, wenn sie die Mitte der Ansicht erreichen, mit Hover und Tastaturauswahl.

Session queueHover a row to preview

Focus scroll list verwenden

Focus scroll list verwendet das Vorschauformat „Karte“ 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
`itemCount`	`number`	`12`	Von 5 bis 20; Schrittweite 1
`showGradients`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`enableArrowNavigation`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`accentColor`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Focus scroll list verfügbar?

Focus scroll list 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 Focus scroll list?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in Focus scroll list erkennbar?

Der React-Quellcode von Focus scroll list enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-current, aria-hidden, aria-label, onKeyDown); Tastenvergleiche (ArrowDown, ArrowUp, Enter). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Focus scroll list reduzierte Bewegung?

Focus scroll list liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 Masonry flow von Fieldbook aus der Kategorie Layout.

1532Masonry flowLayoutEine Mauerwerkswand, die Kacheln unterschiedlicher Höhe in Säulen packt, jede einzelne anhebt, während sie ins Blickfeld gescrollt wird, und das gesamte Raster neu positioniert, wenn sich die Anzahl der Säulen ändert.

Standbild der UI-Komponente Drag split panels von Fieldbook aus der Kategorie Layout.

2342Drag split panelsLayoutDurch dünne ziehbare Griffe unterteilte Bereiche, die die Größe der angrenzenden Bereiche in Echtzeit ändern, in einer Reihe angeordnet oder gestapelt.

Standbild der UI-Komponente Overlay scroll panel von Fieldbook aus der Kategorie Layout.

2396Overlay scroll panelLayoutEin begrenztes Panel, das die Bildlaufleiste der Plattform verbirgt und eine eigene schlanke Overlay-Spur zeichnet, die in Daumengröße dem Inhalt entspricht.

Standbild der UI-Komponente Progressive edge blur von Fieldbook aus der Kategorie Layout.

2407Progressive edge blurLayoutEin Band, das an einer Kante eines Bildlauffelds befestigt ist und dessen Inhalt allmählich in den Hintergrund tritt, anstatt ihn an einer harten Linie abzuschneiden.

Standbild der UI-Komponente Settling photo masonry von Fieldbook aus der Kategorie Layout.

2424Settling photo masonryLayoutEin Mauerwerksgitter aus Fotokacheln unterschiedlicher Höhe, die von außerhalb des Bildschirms einfliegen, sich in ihren gepackten Säulen niederlassen und bei der Landung unscharf werden.

Standbild der UI-Komponente Curved Scroll Wall von Fieldbook aus der Kategorie Layout.

2330Curved Scroll WallLayoutEine horizontal scrollende Wand aus Fotos, die auf einer sanft gekrümmten, gebogenen Ebene gerendert wird und endlos in beide Richtungen scrollt.