Schaltflächen

Hold to delete

Hold to delete: Eine 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.

Hold to delete verwenden

Hold to delete 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`	`Hold to delete`	Bis zu 28 Zeichen
`holdMs`	`number`	`1600`	Von 600 bis 4000; Schrittweite 100
`accent`	`color`	`#FF4D8D`	Keine weitere Grenze in den Metadaten.
`showCountdown`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.
`glyph`	`select`	`bin`	Optionen: bin, archive, block, none

Für welche Frameworks ist Hold to delete verfügbar?

Hold to delete 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 Hold to delete?

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

Welche Details zur Barrierefreiheit sind in Hold to delete erkennbar?

Der React-Quellcode von Hold to delete enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-live, aria-valuemax, aria-valuemin, aria-valuenow, onKeyDown, onKeyUp); explizite Rollen (progressbar). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Hold to delete reduzierte Bewegung?

Hold to delete liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 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.

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

2724Send flight buttonSchaltflächenEin gebürsteter Lichtknopf, der eine kurze Sendesequenz abspielt: Das Papierzeichen fliegt weg, ein Sendeetikett zählt seine Punkte, dann fällt ein Scheck ein.

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

2688Hinged progress buttonSchaltflächenEine Schaltfläche, deren Vorderseite beim Schweben nach hinten schwenkt und ein Fach freigibt, in dem ein Fortschrittsbalken ungleichmäßige Bursts ausfüllt und in voller Breite ausgeblendet wird.