Schaltflächen

Draining fill button

Draining fill button: Eine umrissene Pille, die zu Beginn vollständig mit Farbe überflutet ist und beim Schweben zu einem schmalen Band am Fuß abfließt und sich beim Belassen von unten wieder auffüllt.

Draining fill button verwenden

Draining fill 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`	`Download resume`	Bis zu 28 Zeichen
`accent`	`color`	`#FF6A1F`	Keine weitere Grenze in den Metadaten.
`residual`	`number`	`11`	Von 0 bis 40; Schrittweite 1
`duration`	`number`	`300`	Von 100 bis 800; Schrittweite 50
`borderWidth`	`number`	`2`	Von 1 bis 4; Schrittweite 1

Für welche Frameworks ist Draining fill button verfügbar?

Draining fill 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 Draining fill button?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in Draining fill button erkennbar?

Der React-Quellcode von Draining fill button 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 Draining fill button reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Draining fill button 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 Diagonal blob flood button von Fieldbook aus der Kategorie Schaltflächen.

2538Diagonal blob flood buttonSchaltflächenEin umrissener Knopf, der von einem großen runden Klecks überflutet ist, der von der oberen Ecke diagonal nach innen gleitet und beim Halten dunkler wird.

Standbild der UI-Komponente Diagonal swipe button von Fieldbook aus der Kategorie Schaltflächen.

1850Diagonal swipe buttonSchaltflächenEin umrissener Knopf, der eine dünne, schräge Klinge hält, die sich aufrichtet und verbreitert, bis sie beim Schweben den Rahmen überschwemmt.

Standbild der UI-Komponente Jello squash button von Fieldbook aus der Kategorie Schaltflächen.

2556Jello squash buttonSchaltflächenEin umrissener Knopf, der beim Schweben mit Farbe überflutet wird und durch eine Squash- und Stretch-Sequenz wackelt, bevor er zur Ruhe kommt.

Standbild der UI-Komponente Liquid wave button von Fieldbook aus der Kategorie Schaltflächen.

1870Liquid wave buttonSchaltflächenEine dunkle Pille, halbvoll mit farbiger Flüssigkeit, deren Oberfläche in einer kontinuierlichen, sich nie wiederholenden Welle rollt.

Standbild der UI-Komponente Sliding fill send pill von Fieldbook aus der Kategorie Schaltflächen.

2564Sliding fill send pillSchaltflächenEine Pille mit breitem Umriss und einer festen Scheibe an einem Ende; schwebende Schieber, die sich über die gesamte Pille füllen und das Etikett beim Vorbeigehen umdrehen.

Standbild der UI-Komponente Wipe fill button von Fieldbook aus der Kategorie Schaltflächen.

1664Wipe fill buttonSchaltflächenEin Pillenknopf, dessen münzgroße Scheibe beim Schweben wächst und die gesamte Form bedeckt, wobei die Akzentfüllung unter einem Etikett weggewischt wird, das sich nie bewegt.