1. Docs
2. Erste Schritte
3. Paginierung

Paginierung 1.2.0

Indicate the aktuell Seite within a multi-Seite set using the .velin-pagination Komponente. English: Pagination

Wann verwenden

• Navigate multi-Seite result sets with .velin-pagination controls.
• When content is split across numbered Seiten and Nutzer need previous/next plus Seite Links.

Wann nicht verwenden

• In-Seite section jumping — use Scrollspy or anchor Links.
• Wizard steps — use Stepper.

Einfache Paginierung

<nav aria-label="Seitennavigation">
  <ul class="velin-pagination">
    <li class="velin-page-item"><a class="velin-page-link" href="#">&laquo;</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">1</a></li>
    <li class="velin-page-item active" aria-current="page"><a class="velin-page-link" href="#">2</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">3</a></li>
    <li class="velin-page-item"><a class="velin-page-link" href="#">&raquo;</a></li>
  </ul>
</nav>

Deaktivierte Links

Add .disabled to a Seite item to prevent interaction (e.g. on the first/last Seite).

<li class="velin-page-item disabled">
  <span class="velin-page-link">&laquo;</span>
</li>

Größen

Use .velin-pagination-sm or .velin-pagination-lg for smaller or larger pagination.

<ul class="velin-pagination velin-pagination-sm">…</ul>
<ul class="velin-pagination velin-pagination-lg">…</ul>

Einfache Paginierung

A minimal previous/next pattern using just two Links.

<nav aria-label="Simple pagination" class="velin-flex velin-flex--justify-between">
  <a href="#" class="velin-btn velin-btn--outline">&larr; Zurück</a>
  <a href="#" class="velin-btn velin-btn--outline">Weiter &rarr;</a>
</nav>

Barrierefreiheit

• Wrap controls in <nav> with an accessible name (e.g. pagination).
• Mark the aktuell Seite with aria-aktuell="Seite"; disable or omit the inactive prev/next control appropriately.

Verwandt

• Datentabelle
• Breadcrumb
• Stepper