Die Komponente <ws-pagination> stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Suchergebnisse oder Kategorie navigieren können.

Voraussetzungen

Die Paginierungsfunktion ist abhängig von den Einstellungen der Komponente <ws-paging-size-selector>.
Die Paginierung wird nur angezeigt, wenn der Standardwert oder der vom Nutzer gewählte Wert für die Anzahl der angezeigten Ergebnisse pro Seite kleiner ist als die Gesamtzahl der Suchergebnisse.

Komponente

Die Komponente kann wie folgt auf der Kategorie und Suchergebnisseite eingebunden werden:

<ws-pagination maxVisiblePages="5">
    <button slot="prev"><</button>
    <button slot="current"></button>
    <button slot="standard"></button>
    <button slot="next">></button>
</ws-pagination>

maxVisiblePages: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.
Slots:
- prev: Button für die vorherige Seite (<).
- current: Zeigt die aktuelle Seite (hervorgehoben).
- standard: Zeigt die Seitennummern der anderen sichtbaren Seiten.
- next: Button für die nächste Seite (>).

Die Komponente erzeugt den folgenden Quellcode:

<nav class="pagination">
    <button class="pagination-prev"><</button>
    <span class="pagination-page current">1</span>
    <span class="pagination-page">2</span>
    <span class="pagination-page">3</span>
    <button class="pagination-next">></button>
</nav>

HTML & CSS

Die folgenden CSS-Klassen werden in der Ausgabe generiert und können für individuelles Styling verwendet werden:

.pagination: Container für die Paginierung.
.pagination-prev: Styling für den "Zurück"-Button.
.pagination-next: Styling für den "Weiter"-Button.
.pagination-page: Styling für die einzelnen Seitenzahlen.
.pagination-page.current: Styling für die aktuell ausgewählte Seite.

Zusätzlicher HTML-Code kann nicht innerhalb der Komponente eingefügt werden. Anpassungen sind nur über Slots oder CSS möglich.