# Paginator.

## Übersicht

### Was macht die Komponente?

- Zeigt an, dass mehrere Elemente oder Seiten vorhanden sind, durch welche der Benutzer navigieren kann.

### Wann soll die Komponente eingesetzt werden?

- Wenn durch mehrere, horizontal angeordnete Elemente geswipet werden soll.

### Regeln

- Darf nur bei horizontalem Swipen eingesetzt werden.
- Die Pagination enthält pro Element einen Bubble.
- Wenn nur ein Element vorhanden ist, wird die Pagination ausgeblendet.
- Die Pagination erfolgt nicht in einem Loop.

### Barrierefreiheit

- Zustand der Pagination muss als Alternativtext hinterlegt werden (z.B. "Seite 2 von 3").

## Varianten

### Varianten

- Default
- Floating

#### Default

![Dartellung einer Paginierung](https://digital.sbb.ch/assets/images/mobile/paginator-default-light.webp "Paginierung")

![Dartellung einer Paginierung](https://digital.sbb.ch/assets/images/mobile/paginator-default-dark.webp "Paginierung")

#### Floating

![Dartellung einer Paginierung, floating](https://digital.sbb.ch/assets/images/mobile/paginator-floating-light.webp "Paginierung, floating")

![Dartellung einer Paginierung, floating](https://digital.sbb.ch/assets/images/mobile/paginator-floating-dark.webp "Paginierung, floating")

### Spezifikationen

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=327-11721&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/de/design-system/mobile/components/paginator/