PatternLab (0.1.259)

# Pagination

# Default Pagination

hide code 
<nav aria-label="Seitennavigation">
  <ul class="c-pagination">
    <li class="c-pagination__item -is-arrow -disabled">
      <a class="c-pagination__item__link" href="#" aria-label="Zurück">
        <span aria-hidden="true" class="fa fa-chevron-left"></span>
        <span class="sr-only">Zurück</span>
      </a>
    </li>
    <li class="c-pagination__item -is-active">
        <a class="c-pagination__item__link" href="#">1</a>
    </li>
    <li class="c-pagination__item">
        <a class="c-pagination__item__link" href="#">2</a>
    </li>
    <li class="c-pagination__item">
        <a class="c-pagination__item__link" href="#">3</a>
    </li>
    <li class="c-pagination__item -is-arrow">
      <a class="c-pagination__item__link" href="#" aria-label="Nächste Seite">
        <span aria-hidden="true" class="fa fa-chevron-right"></span>
        <span class="sr-only">Nächste Seite</span>
      </a>
    </li>
  </ul>
</nav>

# DataTable Pagination

TIP

See DataTable.

1 2 3 4 5 … 8
hide code 
<div class="dataTables_paginate paging_simple_numbers">
    <a class="paginate_button previous disabled" aria-controls="ausgangsstoffliste-table" data-dt-idx="0" tabindex="-1" id="ausgangsstoffliste-table_previous"><i class="fa fa-chevron-left"></i></a>
    <span>
        <a class="paginate_button current" aria-controls="ausgangsstoffliste-table" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="ausgangsstoffliste-table" data-dt-idx="6" tabindex="0">8</a>
    </span>
    <a class="paginate_button next" aria-controls="ausgangsstoffliste-table" data-dt-idx="7" tabindex="0" id="ausgangsstoffliste-table_next"><i class="fa fa-chevron-right"></i></a>
</div>

# Pagination Arrows Per Class

.c-pagination__item.-is-arrow.-show-arrow[.-prev/.-next]

hide code 
<ul class="c-pagination">
<li class="c-pagination__item -is-arrow -show-arrow -prev">
  <a class="c-pagination__item__link" href="#" aria-label="Vorherige Seite"></a>
</li>
<li class="c-pagination__item -is-arrow -show-arrow -next">
  <a class="c-pagination__item__link" href="#" aria-label="Nächste Seite"></a>
</li>
</ul>

← Panel →