Schaltflächen

Quarter Turn Add Button

Quarter Turn Add Button: Ein umkreistes Plus, das sich eine Viertelumdrehung dreht und beim Zeigen sofort in einen leichten Strich übergeht, wenn es gehalten wird.

Point to turn and flood, hold for the hard switch.

Quarter Turn Add Button verwenden

Quarter Turn Add 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`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`size`	`number`	`44`	Von 28 bis 72; Schrittweite 2
`turn`	`number`	`90`	Von 0 bis 180; Schrittweite 15
`strokeWidth`	`number`	`1.5`	Von 1 bis 3; Schrittweite 0.25
`fillOnHover`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Quarter Turn Add Button verfügbar?

Quarter Turn Add 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 Quarter Turn Add Button?

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

Welche Details zur Barrierefreiheit sind in Quarter Turn Add Button erkennbar?

Der React-Quellcode von Quarter Turn Add Button 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 Quarter Turn Add Button reduzierte Bewegung?

Quarter Turn Add Button 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 Dashed outline tooltip button von Fieldbook aus der Kategorie Schaltflächen.

2536Dashed outline tooltip buttonSchaltflächenEine gestrichelte Geisterschaltfläche, die beim Schweben oder Fokussieren mit ihrem Akzent überflutet, während sich ein spitzer Tooltip aus dem Rand entfaltet, der der Schaltfläche am nächsten liegt.

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 Expanding disc mute toggle von Fieldbook aus der Kategorie Schaltflächen.

2520Expanding disc mute toggleSchaltflächenEin rundes Symbol zum Umschalten, bei dem eine dunkle Scheibe von der Mitte aus wächst, das pastellfarbene Gesicht verschluckt und die Glyphe auf dem Weg darunter ins Helle verwandelt.

2037Shrinking cap icon rowSchaltflächenEine Reihe runder Symbolschaltflächen, deren Füllung sich hinter einer dunklen Kappe verbirgt, die beim Schweben zusammenfällt und die Farbe vom Rand nach innen freilegt.

Standbild der UI-Komponente Corner bracket frame button von Fieldbook aus der Kategorie Schaltflächen.

2596Corner bracket frame buttonSchaltflächenEin leeres Etikett in Großbuchstaben, das von zwei L-förmigen Klammern umschlossen wird, die von gegenüberliegenden Seiten her eingeschoben werden und dann wachsen, um den Rahmen zu schließen.

Standbild der UI-Komponente Corner bracket seal button von Fieldbook aus der Kategorie Schaltflächen.

2644Corner bracket seal buttonSchaltflächenZwei kurze Eckwinkel wachsen an den Kanten entlang, bis sie beim Schweben einen vollständigen Rahmen um das Etikett bilden.