Schaltflächen

Letter swap copy button

Letter swap copy button: Ein 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.

Letter swap copy button verwenden

Letter swap copy button 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
`label`	`text`	`Copy link`	Bis zu 18 Zeichen
`doneLabel`	`text`	`Copied`	Bis zu 18 Zeichen
`accent`	`color`	`#7C5CFF`	Keine weitere Grenze in den Metadaten.
`stagger`	`number`	`30`	Von 0 bis 90; Schrittweite 5
`resetMs`	`number`	`2000`	Von 600 bis 5000; Schrittweite 100

Für welche Frameworks ist Letter swap copy button verfügbar?

Letter swap copy button 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 Letter swap copy button?

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

Welche Details zur Barrierefreiheit sind in Letter swap copy button erkennbar?

Der React-Quellcode von Letter swap copy button enthält: Attribute und Ereignisbehandler (aria-hidden, aria-live). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Letter swap copy button reduzierte Bewegung?

Letter swap copy button liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: reduce ? 0 : 0.18; duration: reduce ? 0 : 0.3; duration: reduce ? 0.2 : ROLL_MS / 1000. 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 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 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 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.

Standbild der UI-Komponente Flight path confirm button von Fieldbook aus der Kategorie Schaltflächen.

2524Flight path confirm buttonSchaltflächenEin Buchungsknopf, der ein kleines Flugzeug in einer Runde um sein Gesicht fliegt, während drei Punkte pulsieren, dann grün wird und die Buchung als bestätigt meldet.

Standbild der UI-Komponente Hold to delete von Fieldbook aus der Kategorie Schaltflächen.

1636Hold to deleteSchaltflächenEine zerstörerische Schaltfläche, die erst ausgelöst wird, wenn der Zeiger lange genug gedrückt gehalten wird, damit ein Füllbalken darüber läuft, und der zurückspult, sobald Sie ihn loslassen.

2628Icon takeover deleteSchaltflächenEine destruktive Schaltfläche, aufgeteilt in ein fettes Wort und eine schmale Symbolzelle; Durch Bewegen des Mauszeigers oder Fokussierens wird die Zelle über die gesamte Schaltfläche vergrößert, bis nur noch die Glyphe übrig bleibt. Bei Berührung erfolgt eine Bestätigung durch zweimaliges Tippen.