Schaltflächen

Twin Sweep Tile

Twin Sweep Tile: Eine Kachel mit quadratischem Umriss, die sich beim Anheben neigt, zwei schräge Lichtbänder in entgegengesetzte Richtungen über sich zieht und ihre Glyphe gegen eine Beschriftung eintauscht.

Twin Sweep Tile verwenden

Twin Sweep Tile 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
`accent`	`color`	`#3DDC97`	Keine weitere Grenze in den Metadaten.
`label`	`text`	`Powered by`	Bis zu 24 Zeichen
`caption`	`text`	`Beacon Two`	Bis zu 24 Zeichen
`tilt`	`number`	`1`	Von 0 bis 4; Schrittweite 0.5
`sweep`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Twin Sweep Tile verfügbar?

Twin Sweep Tile 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 Twin Sweep Tile?

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

Welche Details zur Barrierefreiheit sind in Twin Sweep Tile erkennbar?

Der React-Quellcode von Twin Sweep Tile enthält: 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 Twin Sweep Tile reduzierte Bewegung?

Twin Sweep Tile liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). 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 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 Channel tile row von Fieldbook aus der Kategorie Schaltflächen.

2313Channel tile rowSchaltflächenEine umlaufende Reihe quadratischer Symbolkacheln unter einer kleinen Beschriftung, wobei jede Kachel beim Schweben in ihre eigene reservierte Farbe überblendet.

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.

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