Schaltflächen

Spin Off Thanks

Spin Off Thanks: Ein Aufruf zum Handeln mit zwei Gesichtern, bei dem sich die obere Seite wegdreht und herausfällt, während sich dahinter eine zweite Seite erhebt, um zu übernehmen.

Hover to preview the hand-off. With latching on, a click keeps the thank-you face up.

Spin Off Thanks verwenden

Spin Off Thanks 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`frontLabel`	`text`	`SUBSCRIBE`	Bis zu 18 Zeichen
`backLabel`	`text`	`THANK YOU`	Bis zu 18 Zeichen
`accent`	`color`	`#FF4D8D`	Keine weitere Grenze in den Metadaten.
`backColor`	`color`	`#7C5CFF`	Keine weitere Grenze in den Metadaten.
`spinDegrees`	`number`	`290`	Von 0 bis 360; Schrittweite 10
`latchOnClick`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Spin Off Thanks verfügbar?

Spin Off Thanks 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 Spin Off Thanks?

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

Welche Details zur Barrierefreiheit sind in Spin Off Thanks erkennbar?

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

Wie berücksichtigt Spin Off Thanks reduzierte Bewegung?

Spin Off Thanks 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 Share toggle chip von Fieldbook aus der Kategorie Schaltflächen.

2035Share toggle chipSchaltflächenEin versenkter Chip, der beim Klicken von einer Einladung in einen bestätigten Zustand wechselt, wobei sein Glyph über die volle Größe hinausgeht, bevor es sich niederlässt.

Standbild der UI-Komponente Captioned Like Button von Fieldbook aus der Kategorie Schaltflächen.

2550Captioned Like ButtonSchaltflächenEine nur aus Symbolen bestehende Herzschaltfläche, die beim Schweben oder Fokussieren eine Beschriftung anzeigt, die von unten aufsteigt und sich bei Bedarf schnell ausfüllt.

Standbild der UI-Komponente Check stroke submit von Fieldbook aus der Kategorie Schaltflächen.

2594Check stroke submitSchaltflächenEine kompakt gefüllte Absenden-Schaltfläche, deren führendes Häkchen sich Strich für Strich selbst zeichnet, wenn die Aktion erfolgreich ist.

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 Counting follow chip von Fieldbook aus der Kategorie Schaltflächen.

2472Counting follow chipSchaltflächenEin umrissener Chip, der ein Etikett mit einer Follower-Zählung verbindet und die geänderten Ziffern beim Einrasten durch ein maskiertes Fenster nach oben und beim Loslassen wieder nach unten rollt.

Standbild der UI-Komponente Destructive sweep button von Fieldbook aus der Kategorie Schaltflächen.

2696Destructive sweep buttonSchaltflächenEine Löschaktion, deren rosafarbene bis purpurrote Schattierung beim Schweben von einem Ende zum anderen streicht und dabei den Behälterdeckel kippt, mit optionalem Halten zum Bestätigen der Linie entlang der Unterkante.