Schaltflächen
Pressable icon toggle
Pressable icon toggle: Eine Schaltfläche mit einem Symbol und einer Beschriftung, die nach dem Klicken optisch gedrückt bleibt, für eine eigenständige Ein- oder Ausschaltaktion wie Stummschalten oder Fettdruck.
Pressable icon toggle verwenden
Pressable icon toggle 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 |
|---|---|---|---|
label | text | Bold | Bis zu 20 Zeichen |
pressed | boolean | false | Keine weitere Grenze in den Metadaten. |
variant | select | outline | Optionen: default, outline |
Für welche Frameworks ist Pressable icon toggle verfügbar?
Pressable icon toggle 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 Pressable icon toggle?
Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion, clsx.
Welche Details zur Barrierefreiheit sind in Pressable icon toggle erkennbar?
Der React-Quellcode von Pressable icon toggle enthält: Attribute und Ereignisbehandler (aria-hidden, aria-pressed). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.
Wie berücksichtigt Pressable icon toggle reduzierte Bewegung?
Pressable icon toggle liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: disabled || reduceMotion ? undefined : { scale: 0.96 }; transition: reduceMotion ? "none" : "background-color 140ms ease, color 140ms ease". Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.
