Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Scroll cue pill

Scroll cue pill: Eine hohe Kapsel mit einem langen, dünnen Pfeil, der auf einer Schleife schwebt, unter dem Zeiger wächst und nach dem Gebrauch wieder zusammenfällt.

Scroll cue pill verwenden

Scroll cue pill verwendet das Vorschauformat „Inline“ 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.

EinstellungTypStandardwertVorschaugrenzen
accentcolor#9BE15DKeine weitere Grenze in den Metadaten.
directionselectdownOptionen: down, up
heightnumber82Von 48 bis 140; Schrittweite 2
driftDistancenumber6Von 0 bis 16; Schrittweite 1
loopbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Scroll cue pill verfügbar?

Scroll cue pill 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 Scroll cue pill?

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

Welche Details zur Barrierefreiheit sind in Scroll cue pill erkennbar?

Der React-Quellcode von Scroll cue pill enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Scroll cue pill reduzierte Bewegung?

Scroll cue pill liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: collapseMs: reduced ? 220 : 460; scale: collapsing && !reduced ? 0 : hovered ? 1.14 : 1. 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 Arrow chip button von Fieldbook aus der Kategorie Schaltflächen.
2640Arrow chip buttonSchaltflächenEine abgerundete Aktionstaste mit einem leuchtenden Pfeilchip am rechten Ende, der beim Schweben mit einem harten, versetzten Schatten von der Seite abhebt und beim Drücken sinkt.
Standbild der UI-Komponente Arrow wipe call to action von Fieldbook aus der Kategorie Schaltflächen.
1629Arrow wipe call to actionSchaltflächenEin Aufruf zum Handeln, dessen dunklere Platte beim Schweben von links nach innen wischt, während ein versteckter Pfeil herausgleitet, um auf die Beschriftung zu treffen, und beim Klicken ein Pixel nach unten drückt.
Standbild der UI-Komponente Blob cap button von Fieldbook aus der Kategorie Schaltflächen.
1842Blob cap buttonSchaltflächenEine Kapselschaltfläche mit einem einfarbigen Flüssigkeitsklecks, der aus einer ruhenden Eckmarkierung anschwillt, um beim Schweben die Form zu füllen.
Standbild der UI-Komponente Collapsing share button von Fieldbook aus der Kategorie Schaltflächen.
2553Collapsing share buttonSchaltflächenEine beschriftete Pille, die zu einer runden Glyphe schrumpft, während ein Streifen Verbindungsplättchen in den Raum schwebt, den sie hinterlassen hat.
Standbild der UI-Komponente Converging chevron button von Fieldbook aus der Kategorie Schaltflächen.
2684Converging chevron buttonSchaltflächenZwei pfeilförmige Platten fliegen von gegenüberliegenden Seiten ein, treffen in der Mitte des Knopfes zusammen und verschließen ihn hinter dem Etikett.
Standbild der UI-Komponente Dashed outline tooltip button von Fieldbook aus der Kategorie Schaltflächen.
2536Dashed outline tooltip buttonSchaltflächenEine gestrichelte Geisterschaltfläche, die beim Schweben oder Fokussieren mit ihrem Akzent überflutet, während sich ein spitzer Tooltip aus dem Rand entfaltet, der der Schaltfläche am nächsten liegt.