# Paginierung

### Farben

Die Paginierung des Listings hat neben den üblichen Farben auch Farben für die verschiedenen Status: :hover, :active und :disabled.

{% hint style="info" %}
**Tipp:** Die Werte der Felder können SCSS-Funktionen sein:

`hsl(hue($sw-border-color), saturation($sw-border-color), 89%)`

Hier wird die Farbe per hsl-Format definiert. Der Farbwinkel und Sättigung der Rahmenfarbe werden mit einer Helligkeit von 89% kombiniert.
{% endhint %}

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fic0enEie0xeDhRrwEKQD%2Fdocs-de-config-theme-components-pagination-colors.png?alt=media\&token=0397ac46-31a5-49d0-9a23-de2822c9cfad)

### Grundeinstellungen

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-3d5c9ad2cbe23fb15c04c509413ca2ace7cc63d7%2Fdocs-de-sconfig-theme-pagination-basic-configuration.png?alt=media" alt=""><figcaption></figcaption></figure>

Das **Aussehen (1)** der Paginierung ist als `Pills` und `Standard` darstellbar. Elemente, die als `Pills` definiert sind, haben einen Abstand zueinander.

Die Option **Disabled-Buttons ausblenden (3)** blendet die überflüssigen Button aus, da diese ohnehin nicht klickbar sind. Befindet man sich beispielsweise auf Seite 1, sind die Buttons für "erste Seite" und "Seite vor" überflüssig.

Beispiele:

![Pills rund](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-cb7f7f7bfd87c6ec92bb88ecd3c3bb703138687c%2Fdocs-front-pills.png?alt=media)

![Standard](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-3d41732abe4c2093fde7e497132272c5be6c68a5%2Fdocs-front-pagination-standard.png?alt=media)

![Pills eckig](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-c7781670a65866b0ef2b089ff7642ea21db2829d%2Fdocs-front-pagination-pills.png?alt=media)

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-cd2613c47cb4a6628bd71597cdc8bca91af6daf0%2Fdocs-de-storefront-theme-pagination-hidden-disabled-buttons.png?alt=media" alt=""><figcaption><p>Disabled-Button ausgeblendet</p></figcaption></figure>

{% hint style="info" %}
Die Abrundungen der Pills ergeben sich aus dem eingestellten Button-Radius aus dem Tab der Allgemein-Einstellungen. Für runde Pill müssen Buttons `rund` eingestellt sein.
{% endhint %}