Layout

Overlay scroll panel

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

Item	SKU	Qty	Total
Steel hex bolts M6x20	FST-2201	480	$57.60
Anti-static wrist strap	ESD-1140	36	$162.00
Cable ties 200mm, black	WRP-0087	900	$27.00
Aluminum L-bracket 40mm	FST-2340	210	$142.80
Thermal paste 5g syringe	CHM-3312	64	$204.80
USB-C panel mount, 1m	CBL-5502	120	$252.00
Silicone gasket 60mm OD	SEL-0921	340	$149.60
Ball bearing 608ZZ	MEC-1187	500	$155.00
Heat shrink tubing 3mm	WRP-0093	260	$23.40
Stainless washer M6	FST-2210	640	$12.80
PCB standoff, brass M3	MEC-1204	300	$45.00
Foam padding sheet 10mm	PKG-4471	48	$283.20
Ribbon cable 20-pin	CBL-5518	90	$121.50
Torx bit set T6-T25	TLS-6603	22	$192.50
Conductive foam pad	ESD-1155	75	$120.00
Rubber grommet 12mm	SEL-0934	410	$28.70
Spring washer M5	FST-2198	720	$14.40
Corrugated shipping box M	PKG-4460	150	$127.50
Nylon spacer 6mm	MEC-1219	380	$22.80
Barcode label roll	PRT-7702	18	$115.20
Flux pen, rosin core	CHM-3325	54	$151.20
Cable gland PG9	SEL-0947	160	$83.20
Aluminum heat sink 20x20	MEC-1233	96	$105.60
Kapton tape 10mm	WRP-0106	40	$158.00
Machine screw M3x8	FST-2224	860	$17.20
Pallet corner protector	PKG-4488	60	$42.00
Manifest total			$2815.00

Overlay scroll panel verwenden

Overlay scroll panel verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/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
`orientation`	`select`	`vertical`	Optionen: vertical, horizontal, both
`height`	`number`	`280`	Von 140 bis 420; Schrittweite 10
`thumbSize`	`number`	`8`	Von 4 bis 14; Schrittweite 1
`autoHide`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Overlay scroll panel verfügbar?

Overlay scroll panel 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 Overlay scroll panel?

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

Welche Details zur Barrierefreiheit sind in Overlay scroll panel erkennbar?

Der React-Quellcode von Overlay scroll panel enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, onKeyDown, tabIndex); explizite Rollen (region); Tastenvergleiche (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Home, PageDown, PageUp). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Overlay scroll panel reduzierte Bewegung?

Overlay scroll panel 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 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 Focus scroll list von Fieldbook aus der Kategorie Layout.

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

Standbild der UI-Komponente Masked reveal disclosure von Fieldbook aus der Kategorie Layout.

2384Masked reveal disclosureLayoutEine Offenlegung, deren Panel auf seine natürliche Höhe anwächst, während ein weicher Verlaufsrand den Inhalt von oben ins Blickfeld wischt und beim Schließen dann rückwärts läuft.

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 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.

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.