Schaltflächen

Skewed shutter button

Skewed shutter button: Ein Knopf, dessen zwei gescherte Bahnen außerhalb seiner Kanten liegen und sich beim Schweben nach innen bewegen, wobei er sich hinter dem Etikett an einer diagonalen Naht schließt.

Skewed shutter button verwenden

Skewed shutter 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
`accent`	`color`	`#FF6A1F`	Keine weitere Grenze in den Metadaten.
`trailing`	`color`	`#7A3410`	Keine weitere Grenze in den Metadaten.
`label`	`text`	`Book a slot`	Bis zu 20 Zeichen
`skew`	`number`	`34`	Von 12 bis 48; Schrittweite 1
`duration`	`number`	`500`	Von 150 bis 1200; Schrittweite 25

Für welche Frameworks ist Skewed shutter button verfügbar?

Skewed shutter 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 Skewed shutter button?

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

Welche Details zur Barrierefreiheit sind in Skewed shutter button erkennbar?

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

Die Quellcode-Analyse fand in der index.tsx von Skewed shutter 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 Slanted shutter button von Fieldbook aus der Kategorie Schaltflächen.

2692Slanted shutter buttonSchaltflächenZwei schräge Akzentfelder fallen von oben und unten herab und schließen über der Pille an einer diagonalen Naht, während das Etikett einmal aufgerollt und durch die Füllung umgedreht wird.

Standbild der UI-Komponente Banded stripe button von Fieldbook aus der Kategorie Schaltflächen.

2497Banded stripe buttonSchaltflächenEin breiter Knopf, dessen Vorderseite in harte diagonale Bänder geschnitten ist, die durch Werte mit einem Akzent schreiten und beim Schweben ein Band darüber gleiten lassen.

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

2560Drifting aura buttonSchaltflächenEin sanft geprägtes, schräges Pad, das hinter seinen Rändern einen verschwommenen Farbstreifen hervorruft und den hellsten Teil um die Kontur gleiten lässt.

Standbild der UI-Komponente Skewed wipe swap button von Fieldbook aus der Kategorie Schaltflächen.

2703Skewed wipe swap buttonSchaltflächenEine Schaltfläche, deren Beschriftung beim Schweben oder Fokussieren wechselt, während ein geschertes Akzentfeld über die Vorderseite gewischt wird.