PostWidgetCarousel funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/post-widget-carousel) — die Library erkennt die Umgebung automatisch.
PostWidgetCarousel
PostWidgetCarousel rendert Beiträge als horizontalen Slider und kombiniert Post-Teaser mit Carousel-Navigation.
Übersicht
import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"
;<PostWidgetCarousel title="You might also like" posts={relatedPosts} />
Import
import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"
CSS:
import "@prokodo/ui/post-widget-carousel.css"
Props
| Prop | Typ | Standard | Pflicht | Beschreibung |
|---|---|---|---|---|
items | PostWidgetCarouselItem[] | — | — | Array von Carousel-Items. |
title | PostWidgetCarouselHeadline | — | — | Abschnitts-Überschrift: { content: string } & HeadlineProps. |
autoplay | number | — | — | Autoplay-Intervall in ms (0 oder undefiniert deaktiviert). |
color | Variants | — | — | Akzentfarbe (erweitert CardProps). |
structuredData | boolean | false | — | JSON-LD-Strukturdaten ausgeben. |
className | string | — | — | CSS-Klasse am Root-Element. |
Siehe
src/components/post-widget-carousel/PostWidgetCarousel.model.tsfür den vollständigenPostWidgetCarouselProps-Typ.
Farbe
Das color-Prop überträgt eine einheitliche Akzentfarbe durch alle visuellen Ebenen des Karussells:
| Wert | Karten-Rahmen / Schatten | Titel-Headline | Eintrags-Headlines | Nav-Buttons |
|---|---|---|---|---|
"primary" | Marken-Blau (30 % Tönung + Glow) | Marken-Blau | Marken-Blau | Primary |
"secondary" | Akzent-Cyan (30 % Tönung + Glow) | Akzent-Cyan | Akzent-Cyan | Secondary |
"success" | Grün-Indikator | Grün | Grün | Success |
"warning" | Bernstein-Indikator | Bernstein | Bernstein | Warning |
"error" | Rot-Indikator | Rot | Rot | Error |
"info" | Neutraler Vordergrundton | Gedämpft | Gedämpft | Info |
"white" | Standard-Weißkarte, kein Schatten | inherit (automatischer Kontrast) | inherit | Primary Fallback |
Wenn kein color übergeben wird, verwenden Headlines "inherit" und Nav-Buttons standardmäßig "primary".
Design-Tokens
PostWidgetCarousel definiert keine eigenen CSS Custom Properties. Passe das Erscheinungsbild an, indem du folgende globale Design-System-Tokens auf :root oder einem übergeordneten Element überschreibst:
| Token | Beschreibung |
|---|---|
--pk-space-sm | Abstand zwischen den Navigationsbuttons |
--pk-space-md | Unterer Versatz der Navigationsbutton-Zeile |
--pk-space-lg | Unteres Padding des Karussell-Bereichs |
--pk-space-xl | Oberer Abstand des Karussell-Bereichs |
--pk-radius-md | Eckenradius der Karussell-Bilder |
AIC-Hinweis
Verwende im Anwendungscode immer den Standard-Importpfad:
import { PostWidgetCarousel } from "@prokodo/ui/post-widget-carousel"
Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.
AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente.
Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).
WCAG-2.2-Status
| Kriterium | Bezeichnung | Status | Hinweis |
|---|---|---|---|
| 1.3.1 | Info und Beziehungen (A) | ✅ Erfüllt | Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden. |
| 2.1.1 | Tastatur (A) | 🔍 Manuell prüfen | Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen. |
| 2.2.2 | Pausieren, Beenden, Ausblenden (A) | 🔍 Manuell prüfen | Animationen oder automatisch rotierende Inhalte, die länger als 5 s laufen, müssen einen Pause-/Stopp-Schalter bieten. |
| 2.4.3 | Fokusreihenfolge (A) | 🔍 Manuell prüfen | Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten. |
| 2.4.7 | Fokus sichtbar (AA) | 🔍 Manuell prüfen | Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich. |
| 4.1.2 | Name, Rolle, Wert (A) | ✅ Erfüllt | Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein. |
Testabdeckung: 1 jest-axe-Assertion(s) in 4 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.
Storybook
👉 PostWidgetCarousel in Storybook öffnen
Quellcode
src/components/post-widget-carousel/PostWidgetCarousel.model.ts