Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Hinged progress button

Hinged progress button: Eine 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.

Hinged progress button verwenden

Hinged progress 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.

EinstellungTypStandardwertVorschaugrenzen
labeltextSync libraryBis zu 32 Zeichen
accentcolor#9BE15DKeine weitere Grenze in den Metadaten.
tiltnumber35Von 10 bis 60; Schrittweite 5
barDurationnumber1.2Von 0.6 bis 2.4; Schrittweite 0.1
depthnumber800Von 300 bis 1600; Schrittweite 100
Für welche Frameworks ist Hinged progress button verfügbar?

Hinged progress 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 Hinged progress button?

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

Welche Details zur Barrierefreiheit sind in Hinged progress button erkennbar?

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

Hinged progress button 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 Flip face button von Fieldbook aus der Kategorie Schaltflächen.
1633Flip face buttonSchaltflächenEin Knopf mit zwei Flächen, die bei einer dreidimensionalen Drehung die eine gegen die andere tauschen und sich von der Stelle, an der sie sich befindet, umkehren, wenn der Zeiger weggeht.
Standbild der UI-Komponente Tilted deck button von Fieldbook aus der Kategorie Schaltflächen.
1898Tilted deck buttonSchaltflächenEin perspektivisch zurückgelegter Knopf wie ein Schlüssel auf einem geneigten Deck, der beim Schweben und Drücken weiter wegkippt und nach unten rutscht.
Standbild der UI-Komponente Collapsing share button von Fieldbook aus der Kategorie Schaltflächen.
2553Collapsing share buttonSchaltflächenEine beschriftete Pille, die zu einer runden Glyphe schrumpft, während ein Streifen Verbindungsplättchen in den Raum schwebt, den sie hinterlassen hat.
Standbild der UI-Komponente Extruded tilt button von Fieldbook aus der Kategorie Schaltflächen.
2767Extruded tilt buttonSchaltflächenEin schwerer, in die Perspektive geneigter Anzeigeknopf, dessen hohle Buchstaben durch zwei harte Versätze extrudiert werden, die die Seiten umdrehen, wenn die Platte im Schwebezustand schwingt, und beim Drücken flach werden.
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 Icon reveal chip von Fieldbook aus der Kategorie Schaltflächen.
2476Icon reveal chipSchaltflächenEin kleiner umrissener Chip, der beim Schweben mit seinem Akzent überflutet, während die Beschriftung nach links gleitet und ein verstecktes Glyph von rechts eingeblendet wird.