Schaltflächen
Orbiting rim light button
Orbiting rim light button: Eine dunkle Pille, deren ein Pixelrand von hinten durch einen sich langsam drehenden Farbkegel beleuchtet wird, der sich schneller dreht, während der Knopf gedrückt gehalten wird.
Orbiting rim light button verwenden
Orbiting rim light button verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „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 | Open console | Bis zu 24 Zeichen |
accent | color | #7C5CFF | Keine weitere Grenze in den Metadaten. |
spinSeconds | number | 5 | Von 1 bis 12; Schrittweite 0.5 |
rimBlur | number | 4 | Von 0 bis 20; Schrittweite 1 |
haloSize | number | 8 | Von 0 bis 24; Schrittweite 1 |
Für welche Frameworks ist Orbiting rim light button verfügbar?
Orbiting rim light 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 Orbiting rim light button?
Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx.
Welche Details zur Barrierefreiheit sind in Orbiting rim light button erkennbar?
Der React-Quellcode von Orbiting rim light button enthält: Attribute und Ereignisbehandler (aria-hidden, 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 Orbiting rim light button reduzierte Bewegung?
Orbiting rim light button liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduced ? "transition-none" : "transition-transform duration-500 ease-out"; reduced ? { duration: 0 } : { duration: pressed ? fastSeconds : idleSeconds, ease: "linear", repeat: Infinity }; rotate: reduced ? 0 : 360. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.
