Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Datendarstellung

Notification feed stack

Notification feed stack: Ein vertikaler Feed, der Benachrichtigungskarten auf einem Timer anzeigt, ältere Karten nach unten schiebt und die ältesten von unten fallen lässt, wenn neue eintreffen.

    Notification feed stack verwenden

    Notification feed stack verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „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
    accentcolor#FF6A1FKeine weitere Grenze in den Metadaten.
    intervalnumber1200Von 500 bis 3000; Schrittweite 100
    maxVisiblenumber4Von 2 bis 6; Schrittweite 1
    pauseOnHoverbooleantrueKeine weitere Grenze in den Metadaten.
    Für welche Frameworks ist Notification feed stack verfügbar?

    Notification feed stack 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 Notification feed stack?

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

    Welche Details zur Barrierefreiheit sind in Notification feed stack erkennbar?

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

    Wie berücksichtigt Notification feed stack reduzierte Bewegung?

    Notification feed stack liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 Reflowing Notification Stack von Fieldbook aus der Kategorie Datendarstellung.
    2412Reflowing Notification StackDatendarstellungEin Stapel von Benachrichtigungskarten, der reibungslos neu fließt, wenn eine neue hinzugefügt oder eine alte verworfen wird, anstatt zu springen.
    Standbild der UI-Komponente Concentric goal rings von Fieldbook aus der Kategorie Datendarstellung.
    2128Concentric goal ringsDatendarstellungDrei ineinander verschachtelte Fortschrittsringe, die sich nacheinander zeichnen, neben einer Anzeige des aktuellen und Zielwerts jedes Ziels.
    Standbild der UI-Komponente Social proof avatar row von Fieldbook aus der Kategorie Datendarstellung.
    2236Social proof avatar rowDatendarstellungEine enge Reihe überlappender Avatarkreise schließt sich mit einer Blase, die alle Personen zählt, die nicht in der Reihe sind.
    Standbild der UI-Komponente Starred repos disclosure von Fieldbook aus der Kategorie Datendarstellung.
    2244Starred repos disclosureDatendarstellungEine Kopfzeile mit einer Umschalttaste, die eine kurze, ausgeblendete Liste markierter Repositorys unter einer Zeile anzeigt, die immer sichtbar bleibt.
    Standbild der UI-Komponente Animated metric counter von Fieldbook aus der Kategorie Datendarstellung.
    2299Animated metric counterDatendarstellungEine große, bloße Zahl, die in dem Moment, in dem sie ins Bild gescrollt wird, von einem Startwert zu ihrem Ziel hochspringt und leicht über das Ziel hinausschießt, bevor sie sich stabilisiert, mit Tausendertrennzeichen und einem optionalen Suffix.
    Standbild der UI-Komponente Before/After Code Diff von Fieldbook aus der Kategorie Datendarstellung.
    2113Before/After Code DiffDatendarstellungZwei Codefelder nebeneinander, mit Vorher- und Nachherbeschriftung, mit eingefärbten hinzugefügten und entfernten Linien und einem Hover-Fokus-Effekt.