Version: latest

Universell einsetzbar

Pagination funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/pagination) — die Library erkennt die Umgebung automatisch.

Pagination

Pagination rendert eine Seitennavigations-Leiste. Sie unterstützt große Seitenzahlen über ein konfigurierbares Fenster von Seiten mit Auslassungspunkten auf beiden Seiten.

Übersicht

import { Pagination } from "@prokodo/ui/pagination"
;<Pagination
  page={currentPage}
  count={totalPages}
  onChange={page => setCurrentPage(page)}
/>

Live PreviewOpen in Storybook ↗

Import

import { Pagination } from "@prokodo/ui/pagination"

CSS:

import "@prokodo/ui/pagination.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`page`	`number`	—	✅	Current active page (1-based).
`count`	`number`	—	✅	Total number of pages.
`onChange`	`(page: number) => void`	—	✅	Called when the user selects a page.
`color`	`"primary" \| "secondary" \| "success" \| "error" \| "info" \| "warning"`	—	—	Akzentfarbe für den Aktiv-Seiten-Indikator.
`siblingCount`	`number`	`1`	—	Pages shown on each side of the active page.
`showFirstLast`	`boolean`	`true`	—	Show first/last page jump buttons.
`disabled`	`boolean`	`false`	—	Deaktiviere all controls.
`isPending`	`boolean`	`false`	—	Animierten Lade-Status anzeigen.
`className`	`string`	—	—	CSS class on root `<nav>` element.

Siehe src/components/pagination/Pagination.model.ts für den vollständigen PaginationProps-Typ.

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Pagination } from "@prokodo/ui/pagination"

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)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.4	Linkzweck (im Kontext) (A)	🔍 Manuell prüfen	Der Zweck jedes Links muss allein aus dem Linktext oder aus dem umgebenden Kontext bestimmbar sein.
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.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
2.5.8	Zielgröße (Minimum) (AA)	🔍 Manuell prüfen	Interaktive Zielbereiche müssen mindestens 24 × 24 CSS-Pixel groß sein. Prüfung in der integrierten Produkt-UI 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: 3 jest-axe-Assertion(s) in 5 Testdatei(en) · 6 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Design Tokens

Pagination lässt sich über CSS Custom Properties an :root oder einem umgebenden Element anpassen.

Token	Standardwert	Beschreibung
`--pk-pagination-gap`	`var(--pk-space-sm)`	Abstand zwischen den Paginierungs-Elementen
`--pk-pagination-fg`	`color-mix(in srgb, var(--pk-color-fg) 70%, transparent)`	Textfarbe von Ellipsis und inaktiven Seitenzahlen
`--pk-pagination-page-radius`	`10px`	Border-Radius der Seitenzahl-Buttons
`--pk-pagination-pad-x`	`var(--pk-space-xs)`	Horizontales Padding der Seitenzahl-Buttons
`--pk-pagination-active-border`	`var(--pk-color-brand)`	Farbe für den Glow-Shadow der aktiven Seite (wird per `color` überschrieben)
`--pk-pagination-active-shadow`	`0 4px 18px color-mix(in srgb, brand 45%, transparent)`	Schlagschatten des aktiven Seiten-Buttons
`--pk-pagination-active-gradient`	`var(--gradient-border-4)`	Gradient für den Rahmen-Ring der aktiven Seite (wird per `color` überschrieben)

Storybook

👉 Pagination in Storybook öffnen

Quellcode

src/components/pagination/Pagination.model.ts