Schaltflächen

Destructive sweep button

Destructive sweep button: Eine 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.

Permanently removes this draft for every collaborator on the workspace.

Destructive sweep button verwenden

Destructive sweep button verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „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`	`Delete draft`	Bis zu 24 Zeichen
`accent`	`color`	`#E11D48`	Keine weitere Grenze in den Metadaten.
`holdToConfirm`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.
`holdMs`	`number`	`900`	Von 300 bis 2000; Schrittweite 50

Für welche Frameworks ist Destructive sweep button verfügbar?

Destructive sweep 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 Destructive sweep button?

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

Welche Details zur Barrierefreiheit sind in Destructive sweep button erkennbar?

Der React-Quellcode von Destructive sweep button enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden, aria-label, onKeyDown, onKeyUp); Tastenvergleiche (Enter, Space). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Destructive sweep button reduzierte Bewegung?

Destructive sweep button liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: sweepDuration: reduced ? "1ms" : "300ms". 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

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.

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.

Standbild der UI-Komponente Staged expand delete button von Fieldbook aus der Kategorie Schaltflächen.

2551Staged expand delete buttonSchaltflächenEine quadratische Mülleimer-Symbolkachel, die sich nach einer kurzen Verzögerung beim Schweben vergrößert, ihre Beschriftung einblendet und nach einem bestätigenden zweiten Klick fragt, bevor sie ausgelöst wird.

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 Diagonal wedge button von Fieldbook aus der Kategorie Schaltflächen.

2676Diagonal wedge buttonSchaltflächenEin quadratischer Knopf, der mit einem dreieckigen Keil gefüllt ist, der diagonal wächst, bis er das gesamte Gesicht bedeckt.

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.