Karten

Threaded post card

Threaded post card: Ein Social-Media-Beitrag, der als gerahmtes Panel mit einem verifizierten Autor, einem mehrzeiligen Textkörper und einer verschachtelten Antwort unter einer Regel dargestellt wird.

Marisol Ortega

@marisolortega

Ship the empty state before the happy path, it is the one people screenshot.

A setting is not finished until its toggle explains what it costs.

Motion should explain a change, never decorate one.

Default to less motion until someone actually asks for more.

Feb 18

Dana Cho@danacho· 2h

This is why the confirmation toast finally stopped feeling like a lecture.

Threaded post card verwenden

Threaded post 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
`handle`	`text`	`marisolortega`	Bis zu 24 Zeichen
`verified`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`showReply`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Threaded post card verfügbar?

Threaded post 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 Threaded post card?

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

Welche Details zur Barrierefreiheit sind in Threaded post card erkennbar?

Der React-Quellcode von Threaded post card enthält: native Elemente (a, button); 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 Threaded post card reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Threaded post card keine direkte Abfrage über useReducedMotion() oder matchMedia. 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 Deferred post card von Fieldbook aus der Kategorie Karten.

1769Deferred post cardKartenEine Postkarte, die zuerst eine gemessene Platzhalterhülle anzeigt und dann den echten Beitrag mit einem wiederholbaren Fehlerstatus einfügt.

Standbild der UI-Komponente Bouncing Photo Fan von Fieldbook aus der Kategorie Karten.

1844Bouncing Photo FanKartenEine Reihe überlappender quadratischer Fotokacheln, die mit einer elastischen Überschwingung auftauchen und sich dann gegenseitig zur Seite schieben, wenn man darüber schwebt.

Standbild der UI-Komponente Card Shuffle Stack von Fieldbook aus der Kategorie Karten.

1846Card Shuffle StackKartenEin aufgefächerter Stapel von Paneelen, der mit einem Timer abläuft: Das vordere Paneel fällt weg, der Rest tritt nach vorne und das heruntergefallene schwenkt hinten ein.

Standbild der UI-Komponente Cursor drift link preview von Fieldbook aus der Kategorie Karten.

1768Cursor drift link previewKartenEin Link-Vorschaufenster, das sich dorthin neigt, wo sich der Zeiger auf dem Link befindet, und ihn auf einer weichen Feder nachzieht.

Standbild der UI-Komponente Invitation review panel von Fieldbook aus der Kategorie Karten.

2870Invitation review panelKartenEine Einladung prüfen, eine Rolle wählen und die Annahme oder Ablehnung sichtbar festhalten.

Standbild der UI-Komponente Link thumbnail peek von Fieldbook aus der Kategorie Karten.

1784Link thumbnail peekKartenWenn Sie mit der Maus über einen Link im laufenden Text fahren, wird eine kleine gerahmte Miniaturansicht angezeigt, die zeigt, wohin er führt, mit dem Seitentitel und dem Host darunter.