Überlagerungen

Link preview card

Link preview card: Ein kleines Vorschaufenster, das nach einem kurzen Hover neben einem Link oder Benutzernamen erscheint und eine Zusammenfassung dessen anzeigt, was sich dahinter verbirgt, ohne dass ein Klick erforderlich ist.

Field notes - Sep 3

Pantry sensor build wrapped

Wrote up the full build in the pantry sensor write-upWiring the pantry sensor. fieldnotes.log. A walkthrough of the humidity sensor build, from breadboard to a mount that survives a slammed door., and PriyaPriya Shenoy. Reviewed the wiring. Caught a grounding issue before it reached the board. Owes her a coffee for that one. gets credit for catching the mistake before it shipped.

Hover or focus either name for the full picture.

Link preview card verwenden

Link preview card 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`openDelay`	`number`	`500`	Von 0 bis 1200; Schrittweite 50
`closeDelay`	`number`	`200`	Von 0 bis 800; Schrittweite 50
`side`	`select`	`bottom`	Optionen: top, bottom, left, right

Für welche Frameworks ist Link preview card verfügbar?

Link preview card 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 Link preview card?

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

Welche Details zur Barrierefreiheit sind in Link preview card erkennbar?

Der React-Quellcode von Link preview card enthält: Attribute und Ereignisbehandler (aria-describedby, aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Link preview card reduzierte Bewegung?

Link preview card liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: duration: reduced ? 0.1 : 0.18; reduced ? { opacity: 0 } : { opacity: 0, scale: 0.92, x: rise.x, y: rise.y }. 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 Link Preview Card von Fieldbook aus der Kategorie Überlagerungen.

2380Link Preview CardÜberlagerungenEine umfangreiche Vorschaukarte, die von der Seite, auf der sie geöffnet wird, eingeblendet und eingeblendet wird, wenn Sie mit der Maus über einen verknüpften Namen fahren, mit einer kurzen Verzögerung, um ein Flackern zu vermeiden.

Standbild der UI-Komponente Account Menu Flyout von Fieldbook aus der Kategorie Überlagerungen.

2296Account Menu FlyoutÜberlagerungenEine Profilübersichtsschaltfläche, die ein Kontomenü mit beschrifteten Zeilen öffnet, mit einer kleinen gebogenen Indikatorlinie, die gerade wird, wenn das Menü geöffnet ist.

Standbild der UI-Komponente Anchored popover card von Fieldbook aus der Kategorie Überlagerungen.

1912Anchored popover cardÜberlagerungenEine Auslösetaste, die eine kleine Einstellungskarte öffnet, die an sich selbst verankert ist, sich vom Rand aus verkleinert und bei einem zweiten Klick, Escape oder einem Druck von außen schließt.

Standbild der UI-Komponente App folder expand von Fieldbook aus der Kategorie Überlagerungen.

2300App folder expandÜberlagerungenEine Ordnerkachel im Startbildschirm-Stil, deren kleine App-Symbole zu einem vollständigen Bedienfeld wachsen, wobei jedes Symbol von seiner Miniaturansicht zu seiner großen Position wandert.

Standbild der UI-Komponente Bottom sheet panel von Fieldbook aus der Kategorie Überlagerungen.

2271Bottom sheet panelÜberlagerungenEin Blatt im mobilen Stil, das mit einem Greifgriff an der Unterkante angehoben wird und zum Verwerfen wieder nach unten gezogen werden kann.

Standbild der UI-Komponente Bounce warning dialog von Fieldbook aus der Kategorie Überlagerungen.

1923Bounce warning dialogÜberlagerungenEin Bestätigungsdialog erscheint mit einem federnden Überschwingen und einem springenden Symbolabzeichen und fordert eine Antwort auf, bevor die Seite unten wieder nutzbar ist.