Pagination

Teilt eine lange Liste in Seiten auf und wechselt zwischen ihnen, indem es angibt, wo sich die Person befindet und wie viel noch übrig ist.

Auf dieser Seite

Playground

Aktuelle Seite

Pro Seite

Hintergrund

HTML

<nav class="feitio-pagination" aria-label="Terminseiten"><ul><li><span aria-current="page">1</span></li><li><a href="#playground-2" aria-label="Seite 2">2</a></li><li><span class="gap" aria-hidden="true">…</span></li><li><a href="#playground-7" aria-label="Seite 7">7</a></li><li><a class="step" href="#playground-2" rel="next">Weiter<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg></a></li></ul><div class="meta"><p class="count">Zeige 1–20 / 132</p></div></nav>

Wann verwenden

Wenn eine Tabelle oder Liste etwa 25 bis 50 Zeilen überschreitet.

Wann nicht verwenden

Wenige Zeilen: zeige sie alle an.
Infinite scroll: nein. Es verbirgt das Footer, erlaubt nicht den Rückgang zum gleichen Ort und verwirrt Screenreader.

Beispiele

Seiten und pro Seite

Vorherige und Nächste in Worten, die aktuelle Seite mit der Tinte markiert, die Anzahl und optional die Anzahl der Elemente pro Seite.

Code anzeigen

HTML

<nav class="feitio-pagination" aria-label="Páginas de agendamentos">
  <ul>
    <li><a class="step prev" href="?pagina=2" rel="prev">…Anterior</a></li>
    <li><span aria-current="page">3</span></li>
    <li><a class="step" href="?pagina=4" rel="next">Próxima…</a></li>
  </ul>
  <div class="meta">
    <p class="count">Mostrando 41 a 60 de 132 agendamentos</p>
    <div class="per-page" role="group" aria-label="Por página">…</div>
  </div>
</nav>

Variationen

Erschte und letzte Seite: ein Link, der nirgendwohin führt; er verschwindet; er ist nicht deaktiviert.
Viele Seiten: die erste, die letzte und die Nachbarn der aktuellen mit einem Ellipsenzeichen dazwischen.
Bei Änderung der Größe: die neue Seite beginnt bei dem ersten Element, das die Person sah.
Alles passt auf eine Seite: der ganze Komponente verschwindet; wenn nur die Zahlen bleiben, bleibt "Pro Seite" stehen.

Anatomie

Vorherige und Nächste: Wort mit dem Pfeil; sie verschwinden auf der ersten und letzten Seite.
Aktuelle Seite: Tinte markierung, kein Link.
Nächster: immer am Ende der Zeile.
Zähler: wo sich die Person befindet und wie viel insgesamt.
Pro Seite: optional.

Do and don't

Sagt, wo sich die Person befindet und wie viel noch übrig ist.

Don’t

Nur Pfeile, keine Zahl, keine Gesamtzahl.

Ein benanntes <nav>; die aktuelle Seite mit aria-current="page" und ohne Link.
Jede Zahl mit ihrem vollständigen Namen für Screenreader ("Seite 4").
40px-Ziele, auch bei den Zahlen.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-pagination"`	im `<nav>`	Die Links in einer Reihe und darunter die Anzahl und Größe.
`aria-current="page"`	auf der aktuellen Seite	Tintenlinie, kein Link.
`class="step"`, `"step prev"`	Nächste und Vorherige	Wort mit dem Pfeil.
`rel`	`"prev"`, `"next"`	Sagt dem Browser, welche Seite vorherige und nächste ist.
`class="per-page"`	optional	Die Seitengrößen als Links.