Pagination

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Seitennummerierung, Blätter-Navigation, Seiten-Steuerung

Beschreibung: Die Pagination-Komponente ermöglicht es Nutzern, durch Datensätze oder Inhalte zu navigieren, die auf mehrere Seiten aufgeteilt sind. Sie zeigt die Gesamtanzahl der Seiten an und erlaubt die direkte Auswahl einer bestimmten Seite sowie die Navigation über Schaltflächen (vorherige, nächste, erste, letzte Seite).

Beispiel

Darstellung einer Pagination mit Standardkonfiguration:

<KolPagination _boundaryCount={1} _label="Seitennavigation" _max={100} _on={{}} _page={1} _pageSize={5} _siblingCount={1} />

Barrierefreiheit

Die Pagination-Komponente wurde mit Fokus auf Barrierefreiheit entwickelt:

• Semantische HTML: Die Komponente nutzt korrekte HTML-Elemente und ARIA-Attribute, um die Struktur für assistive Technologien verständlich zu machen.
• Label: Das Attribut _label bietet eine optionale Beschriftung, die Screenreader-Nutzern den Zweck der Pagination vermittelt.
• Aktive Seite: Die aktuell ausgewählte Seite ist visuell deutlich hervorgehoben und wird von Screenreadern als aktiv gekennzeichnet.
• Tastaturnavigation: Alle Navigationsschaltflächen sind über Tastatur erreichbar und fokussierbar.
• Tooltip-Ausrichtung: Das Attribut _tooltipAlign ermöglicht es, die Positionierung von Tooltips an verschiedene Benutzerszenarien anzupassen.

Links und Referenzen

Verwendung

Tastatursteuerung

Taste	Funktion
Tab	Fokussiert die nächste Navigation oder Seitennummer.
Enter / Leertaste	Aktiviert die fokussierte Seite oder Schaltfläche.

Best Practices / Empfehlungen

• Seitengröße sinnvoll wählen: Legen Sie _pageSize basierend auf dem Kontext fest – typischerweise 10–50 Elemente pro Seite.
• Boundaries und Siblings ausgewogen dimensionieren: Nutzen Sie _boundaryCount und _siblingCount, um eine sinnvolle Balance zwischen Übersicht und Navigationsmöglichkeiten zu schaffen.
• Navigation-Buttons gezielt einsetzen: Begrenzen Sie Navigation-Buttons mit _hasButtons auf notwendige Funktionen; nicht jede Anwendung braucht „Erste" und „Letzte" Seite.
• Seite nach oben springen: Wenn Nutzer eine neue Seite wählen, sollte die Page zumeist nach oben scrollen, damit der neue Inhalt direkt sichtbar ist.
• Kontextuelle Seitengröße: Bieten Sie über _pageSizeOptions Optionen zur Seitengröße an, wenn der Nutzer unterschiedliche Ansichten bevorzugt.
• Aktuelle Position kommunizieren: Ergänzen Sie die Pagination mit Text wie „Seite X von Y", um Nutzern die Orientierung zu erleichtern.

Anwendungsfälle

• Suchergebnisse: Navigation durch große Ergebnismengen von Suchvorgängen.
• Listen und Tabellen: Aufteilung langer Datenlisten in verwaltbare Abschnitte.
• Blog-Artikel: Navigation zwischen älteren und neueren Beiträgen.
• Kataloge: Blättern durch Produkten oder Inhalte in Katalogen.
• Formularschritte: Aufteilung mehrteiliger Formulare in navigierbare Schritte.

FAQ

Wann sollte ich _pageSize ändern?
Passen Sie _pageSize an Ihre Inhaltsart und Kontext an. Für Suchergebnisse sind oft 10–20 Elemente sinnvoll, für Tabellen können es auch 50+ sein.

Was ist der Unterschied zwischen _siblingCount und _boundaryCount?
_siblingCount bestimmt, wie viele Seitennummern links und rechts der aktuellen Seite angezeigt werden. _boundaryCount bestimmt, wie viele Seiten am Anfang und am Ende der Pagination angezeigt werden.

Kann ich die Seitengröße dynamisch ändern?
Ja, nutzen Sie _pageSizeOptions, um Nutzern ein Dropdown-Menü zur Wahl der Seitengröße anzubieten, und reagieren Sie auf das Event changePageSize.

Konstruktion / Technik

Playground

Has Buttons

<KolPagination _boundaryCount={1} _label="Seitennavigation" _max={100} _on={{}} _page={6} _pageSize={5} _siblingCount={1} />

Funktionalitäten (mit Code)

Basis-Pagination

Einfache Pagination mit Standardwerten:

<KolPagination _boundaryCount={1} _label="Seitennavigation" _max={100} _on={{}} _page={5} _pageSize={10} _siblingCount={1} />

Sichtbare Seiten konfigurieren

Die Anzahl der sichtbaren Seitennummern wird durch _siblingCount (neben der aktuellen Seite) und _boundaryCount (an den Rändern) gesteuert:

<KolPagination _boundaryCount={1} _label="Seitennavigation" _max={100} _on={{}} _page={5} _pageSize={10} _siblingCount={2} />

Navigation-Buttons

Das Attribut _hasButtons steuert, welche Navigations-Buttons (erste, letzte, vorherige, nächste Seite) angezeigt werden:

Has Buttons

<KolPagination _boundaryCount={1} _hasButtons={true} _label="Seitennavigation" _max={100} _on={{}} _page={5} _pageSize={10} _siblingCount={1} />

Optionen für _hasButtons:

• true: Alle Navigation-Buttons anzeigen (Standard)
• false: Keine Navigation-Buttons anzeigen
• Objekt mit { first: boolean; last: boolean; next: boolean; previous: boolean; }: Individuelle Kontrolle über jeden Button

Seitengröße wählbar machen

Mit _pageSizeOptions ermöglichen Sie Nutzern, die Anzahl der Elemente pro Seite zu wählen:

<KolPagination _boundaryCount={1} _label="Seitennavigation" _max={200} _on={{}} _page={1} _pageSize={10} _pageSizeOptions={[10,25,50,100]} _siblingCount={1} />

Label und Tooltip-Ausrichtung

Das Attribut _label bietet eine optionale Beschriftung, und _tooltipAlign positioniert Tooltips:

<KolPagination _boundaryCount={1} _label="Seiten-Navigation" _max={50} _on={{}} _page={3} _pageSize={5} _siblingCount={1} _tooltipAlign="top" />

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Event	Auslöser	Value
click	Seite wird angeklickt	Nummer der Seite
changePage	Seite wird angeklickt	Nummer der neuen Seite
changePageSize	Seitengröße wird geändert	Neue Seitengröße

API

Properties

Property	Attribute	Description	Type	Default
_boundaryCount	_boundary-count	Defines the amount of pages to show next to the outer arrow buttons.	number | undefined	1
_customClass	_custom-class	Defines the custom class attribute if _variant="custom" is set.	string | undefined	undefined
_hasButtons	_has-buttons	Defines which navigation buttons to render (first, last, next, previous buttons).	boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }	true
_label	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string | undefined	undefined
_max (required)	_max	Defines the maximum value of the element.	number	undefined
_on (required)	--	Gibt an, auf welche Callback-Events reagiert werden.	{ onChangePage?: EventValueOrEventCallback<Event, number> | undefined; onChangePageSize?: EventValueOrEventCallback<Event, number> | undefined; onClick?: EventValueOrEventCallback<Event, number> | undefined; }	undefined
_page (required)	_page	Defines the current page.	number	undefined
_pageSize	_page-size	Defines the amount of entries to show per page.	number	1
_pageSizeOptions	_page-size-options	Defines the options for the page-size-select.	number[] | string	[]
_siblingCount	_sibling-count	Defines the amount of pages to show next to the current page.	number | undefined	1
_tooltipAlign	_tooltip-align	Defines where to show the Tooltip preferably: top, right, bottom or left.	"bottom" | "left" | "right" | "top" | undefined	'top'

---