Source

Paginacija

Dokumentacija in primeri za prikaz paginacije, ki označuje vrsto sorodne vsebine, obstaja na več straneh.

Pregled

Za naše označevanje strani uporabljamo velik blok povezanih povezav, zaradi česar je povezave težko zgrešiti in jih je enostavno razširiti – vse to pa zagotavlja velika območja zadetkov. Paginacija je zgrajena s seznamskimi elementi HTML, tako da lahko bralniki zaslona objavijo število razpoložljivih povezav. Uporabite ovojni <nav>element, da ga prepoznate kot navigacijski del za bralnike zaslona in druge podporne tehnologije.

Poleg tega, ker imajo strani verjetno več kot en tak razdelek za krmarjenje, je priporočljivo zagotoviti opis aria-label, ki bo <nav>odražal njegov namen. Na primer, če se komponenta paginacije uporablja za krmarjenje med nizom rezultatov iskanja, bi lahko bila ustrezna oznaka 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>

Delo z ikonami

Želite uporabiti ikono ali simbol namesto besedila za nekatere povezave do strani? Ne pozabite zagotoviti ustrezne podpore za bralnik zaslona z ariaatributi in .sr-onlypripomočkom.

<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>
        <span class="sr-only">Previous</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>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Onemogočeno in aktivno stanje

Povezave do strani so prilagodljive različnim okoliščinam. Uporabite .disabledza povezave, za katere se zdi, da jih ni mogoče klikniti, in .activeza označevanje trenutne strani.

Medtem ko .disabledrazred pointer-events: noneposkuša onemogočiti funkcijo povezav s ,<a> ta lastnost CSS še ni standardizirana in ne upošteva navigacije s tipkovnico. Zato bi morali vedno dodati tabindex="-1"onemogočene povezave in uporabiti JavaScript po meri, da v celoti onemogočite njihovo delovanje.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <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 želji lahko zamenjate aktivna ali onemogočena sidra za <span>ali pa izpustite sidro v primeru puščic prejšnji/naslednji, da odstranite funkcijo klika in preprečite fokus tipkovnice, medtem ko ohranite predvidene sloge.

<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">
      <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 večjo ali manjšo paginacijo? Dodajte .pagination-lgali .pagination-smza dodatne velikosti.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Poravnava

Spremenite poravnavo komponent paginacije s pripomočki 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">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">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>