Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Press plate toggle

Press plate toggle: Eine bloße Schaltfläche mit zwei Zuständen, deren gefüllte Platte beim Drücken hinter dem Inhalt eingeblendet wird, wobei der Zustand von außerhalb der Schaltfläche selbst lesbar und einstellbar ist.

Press plate toggle verwenden

Press plate toggle verwendet das Vorschauformat „Karte“ 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.

EinstellungTypStandardwertVorschaugrenzen
startPressedbooleanfalseKeine weitere Grenze in den Metadaten.
accentcolor#38BDF8Keine weitere Grenze in den Metadaten.
radiusnumber8Von 0 bis 18; Schrittweite 1
fadeMsnumber160Von 0 bis 500; Schrittweite 20
showControlsbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Press plate toggle verfügbar?

Press plate 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 Press plate toggle?

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

Welche Details zur Barrierefreiheit sind in Press plate toggle erkennbar?

Der React-Quellcode von Press plate toggle enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-pressed). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Press plate toggle reduzierte Bewegung?

Press plate toggle liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduceMotion ? 0 : fadeMs; reduceMotion ? undefined : { scale: 0.94 }. 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 Latching icon toggle von Fieldbook aus der Kategorie Schaltflächen.
1640Latching icon toggleSchaltflächenEin quadratischer Knopf, der ein- und ausgeschaltet werden kann: Eine gefüllte Platte wird eingeblendet, die Glyphe wird durch das entsprechende Gegenstück ersetzt und eine Beschriftung daneben verdeutlicht den Zustand in Worten.
Standbild der UI-Komponente Captioned Like Button von Fieldbook aus der Kategorie Schaltflächen.
2550Captioned Like ButtonSchaltflächenEine nur aus Symbolen bestehende Herzschaltfläche, die beim Schweben oder Fokussieren eine Beschriftung anzeigt, die von unten aufsteigt und sich bei Bedarf schnell ausfüllt.
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 Counting follow chip von Fieldbook aus der Kategorie Schaltflächen.
2472Counting follow chipSchaltflächenEin umrissener Chip, der ein Etikett mit einer Follower-Zählung verbindet und die geänderten Ziffern beim Einrasten durch ein maskiertes Fenster nach oben und beim Loslassen wieder nach unten rollt.
Standbild der UI-Komponente Inset sheen button von Fieldbook aus der Kategorie Schaltflächen.
2699Inset sheen buttonSchaltflächenEine blasse Utility-Taste mit einem haarfeinen Rand, einer Hervorhebung von einem Pixel am oberen Rand und einem gedrückten Zustand, der den Glanz nach innen dreht.
Standbild der UI-Komponente Key Turn Chip von Fieldbook aus der Kategorie Schaltflächen.
2373Key Turn ChipSchaltflächenEin kleiner gefüllter Chip, dessen Schlüsselsymbol beim Schweben wackelt, als würde er nach einem Schloss suchen, sich dann um ein Viertel drehen und beim Klicken entriegeln.