Schaltflächen

Compass share burst

Compass share burst: Ein runder Share-Button, der sein Ziel auffächert, verteilt sich in einem gestaffelten Stoß auf die Himmelsrichtungen und zieht sie in umgekehrter Reihenfolge wieder nach Hause.

Share this field note

Hover the chip, or focus it and press Enter, to fan out the destinations.

Compass share burst verwenden

Compass share burst verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell“.

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
`count`	`number`	`8`	Von 3 bis 8; Schrittweite 1
`radius`	`number`	`70`	Von 40 bis 140; Schrittweite 5
`stagger`	`number`	`100`	Von 0 bis 300; Schrittweite 10
`accent`	`color`	`#FF6A1F`	Keine weitere Grenze in den Metadaten.
`latchOnClick`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Compass share burst verfügbar?

Compass share burst 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 Compass share burst?

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

Welche Details zur Barrierefreiheit sind in Compass share burst erkennbar?

Der React-Quellcode von Compass share burst enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-expanded, aria-hidden, aria-label, onKeyDown, tabIndex); explizite Rollen (group); Tastenvergleiche (Escape). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Compass share burst reduzierte Bewegung?

Compass share burst 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 Radial Share Fan von Fieldbook aus der Kategorie Schaltflächen.

2504Radial Share FanSchaltflächenEin runder Share-Auslöser, der einen Stapel von Zielknöpfen entlang eines Bogens auswirft, wobei jeder einzelne eine ganze Drehung lang an seinen Platz fällt.

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 Center out underline link von Fieldbook aus der Kategorie Schaltflächen.

1929Center out underline linkSchaltflächenEin Navigationslink, dessen Unterstreichung beim Schweben von der Mitte nach außen zu beiden Enden wächst und beim Verlassen des Zeigers wieder zu einem Punkt zurückgezogen wird.

Standbild der UI-Komponente Letter cascade button von Fieldbook aus der Kategorie Schaltflächen.

1712Letter cascade buttonSchaltflächenEin breiter, fester Knopf, dessen zentrierte Beschriftung wegfällt und Buchstabe für Buchstabe neu aufgebaut wird, während jedes Zeichen von oben an seinen Platz fällt.

Standbild der UI-Komponente Letter swap copy button von Fieldbook aus der Kategorie Schaltflächen.

2718Letter swap copy buttonSchaltflächenEin erhabener Kopierknopf, dessen Beschriftung sich beim Schweben Buchstabe für Buchstabe neu aufbaut, während sein Symbolchip pulsiert und einen Scheck zieht, wenn die Kopie landet.

Standbild der UI-Komponente Lifting share chip von Fieldbook aus der Kategorie Schaltflächen.

2480Lifting share chipSchaltflächenEin kleiner fester Chip mit einem Glyphen und einer kurzen Kappenbeschriftung, der sich beim Schweben um einige Pixel anhebt und weicher wird, sich beim Drücken einrastet und ein gefülltes Glyph umschalten kann.