Source

Paginacija

Dokumentacija i primjeri za prikaz paginacije za označavanje niza povezanih sadržaja postoje na više stranica.

Pregled

Koristimo veliki blok povezanih poveznica za našu paginaciju, čineći poveznice teško promašenim i lako skalabilnim—a sve dok pružamo velika područja pretraživanja. Paginacija je izgrađena pomoću HTML elemenata popisa kako bi čitači zaslona mogli objaviti broj dostupnih veza. Upotrijebite omotni <nav>element da ga identificirate kao navigacijski odjeljak za čitače zaslona i druge pomoćne tehnologije.

Nadalje, budući da stranice vjerojatno imaju više od jednog takvog odjeljka za navigaciju, preporučljivo je pružiti opis aria-labelkako <nav>bi odražavao njegovu svrhu. Na primjer, ako se komponenta paginacije koristi za navigaciju između niza rezultata pretraživanja, odgovarajuća bi oznaka mogla biti aria-label="Search results pages".

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Rad sa ikonama

Želite koristiti ikonu ili simbol umjesto teksta za neke veze na stranice? Osigurajte ispravnu podršku za čitač zaslona s ariaatributima.

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Onesposobljena i aktivna stanja

Veze na stranice mogu se prilagoditi različitim okolnostima. Koristite .disabledza poveznice na koje se ne može kliknuti i .activeza označavanje trenutne stranice.

Iako .disabledklasa pokušava onemogućiti funkcionalnost veze za s, to CSS svojstvo još nije standardizirano i ne uzima u obzir navigaciju tipkovnicom pointer-events: none. Kao takvi, uvijek biste trebali dodavati onemogućene veze i koristiti prilagođeni JavaScript kako biste u potpunosti onemogućili njihovu funkcionalnost.<a>tabindex="-1"

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Po izboru možete zamijeniti aktivna ili onemogućena sidra za <span>ili izostaviti sidro u slučaju strelica prethodno/sljedeće, kako biste uklonili funkciju klika i spriječili fokus tipkovnice uz zadržavanje željenih stilova.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Previous</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Dimenzioniranje

Želite li veću ili manju paginaciju? Dodajte .pagination-lgili .pagination-smza dodatne veličine.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

Poravnanje

Promijenite poravnanje komponenti paginacije pomoću uslužnih programa flexbox .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>