Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Lifting share chip

Lifting share chip: Ein kleiner fester Chip mit einem Glyphen und einer kurzen Kappenbeschriftung, der sich beim Schweben um einige Pixel anhebt und weicher wird, sich beim Drücken einrastet und ein gefülltes Glyph umschalten kann.

Lifting share chip verwenden

Lifting share chip 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.

EinstellungTypStandardwertVorschaugrenzen
labeltextShareBis zu 16 Zeichen
accentcolor#38BDF8Keine weitere Grenze in den Metadaten.
glyphselectshareOptionen: share, bookmark, heart
liftnumber4Von 0 bis 10; Schrittweite 1
Für welche Frameworks ist Lifting share chip verfügbar?

Lifting share chip 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 Lifting share chip?

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

Welche Details zur Barrierefreiheit sind in Lifting share chip erkennbar?

Der React-Quellcode von Lifting share chip 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 Lifting share chip reduzierte Bewegung?

Lifting share chip liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: reduced ? { opacity: 0.85 } : { y: -lift, opacity: 0.85 }; reduced ? { opacity: 1 } : { y: 1, opacity: 1 }. 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 Elevated chip button von Fieldbook aus der Kategorie Schaltflächen.
2534Elevated chip buttonSchaltflächenEin blasser, abgerundeter Chip, der auf gestapelten weichen Schatten ruht, der sich beim Schweben zum Akzent hin verfärbt und beim Drücken auf einen tieferen Schatten mit einer Akzentkontur absinkt.
Standbild der UI-Komponente Share toggle chip von Fieldbook aus der Kategorie Schaltflächen.
2035Share toggle chipSchaltflächenEin versenkter Chip, der beim Klicken von einer Einladung in einen bestätigten Zustand wechselt, wobei sein Glyph über die volle Größe hinausgeht, bevor es sich niederlässt.
Standbild der UI-Komponente Uppercase action button von Fieldbook aus der Kategorie Schaltflächen.
2706Uppercase action buttonSchaltflächenEine kompakte gefüllte Aktionsschaltfläche mit einer verfolgten Großbuchstabenbeschriftung, eckigen Ecken und leisen, nur gefüllten Hover- und Gedrückt-Zuständen für Symbolleisten und Panel-Header.
Standbild der UI-Komponente Arrow chip button von Fieldbook aus der Kategorie Schaltflächen.
2640Arrow chip buttonSchaltflächenEine abgerundete Aktionstaste mit einem leuchtenden Pfeilchip am rechten Ende, der beim Schweben mit einem harten, versetzten Schatten von der Seite abhebt und beim Drücken sinkt.
Standbild der UI-Komponente Arrow to label pill von Fieldbook aus der Kategorie Schaltflächen.
2469Arrow to label pillSchaltflächenEin runder Chevron-Knopf, der sich beim Schweben in eine breite beschriftete Pille ausdehnt und die Markierung gegen ein Wort eintauscht, während die flache Füllung zu einer Rampe mit zwei Stopps wird.
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.