Schaltflächen

Icon takeover delete

Icon takeover delete: Eine 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.

Hover a button to preview the takeover, press to act.

Icon takeover delete verwenden

Icon takeover 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`	`Delete`	Bis zu 20 Zeichen
`accent`	`color`	`#FF4D8D`	Keine weitere Grenze in den Metadaten.
`cellWidth`	`number`	`40`	Von 28 bis 64; Schrittweite 1
`glyph`	`select`	`cross`	Optionen: cross, bin, minus
`confirmOnTap`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Icon takeover delete verfügbar?

Icon takeover 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 Icon takeover delete?

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

Welche Details zur Barrierefreiheit sind in Icon takeover delete erkennbar?

Der React-Quellcode von Icon takeover delete enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Icon takeover delete reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Icon takeover delete keine direkte Abfrage über useReducedMotion() oder matchMedia. 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 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 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.

2485Rocking icon CTASchaltflächenEine solide Akzentpille, deren führendes Kalendersymbol beim Schweben wie ein Metronom wackelt und beim Anklicken ein Häkchen zeichnet und den Wortlaut durch eine bestätigte Bezeichnung ersetzt, bevor es wieder zur Ruhe kommt.

2714Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die sich beim Schweben in eine beschriftete Pille ausdehnt und bei Eintreffen einer Akzentfüllung ihre Glyphe gegen ein Wort eintauscht.

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 Breathing Inset Button von Fieldbook aus der Kategorie Schaltflächen.

2579Breathing Inset ButtonSchaltflächenEin hell geformter Knopf, dessen inneres Panel sich beim Schweben vom Rand löst, während das Sendezeichen ein kurzes Stück in Richtung der Beschriftung gleitet.