Source

Stránkovanie

Dokumentácia a príklady zobrazenia stránkovania na označenie série súvisiaceho obsahu existuje na viacerých stránkach.

Prehľad

Na stránkovanie používame veľký blok prepojených odkazov, vďaka čomu je ťažké prehliadnuť a ľahko škálovať – a to všetko pri poskytovaní veľkých oblastí prístupu. Stránkovanie je vytvorené pomocou prvkov HTML zoznamu, takže čítačky obrazovky môžu oznámiť počet dostupných odkazov. Použite obalový <nav>prvok, aby ste ho identifikovali ako navigačnú sekciu pre čítačky obrazovky a ďalšie pomocné technológie.

Okrem toho, keďže stránky majú pravdepodobne viac ako jednu navigačnú sekciu, odporúča sa poskytnúť popis aria-label, <nav>aby odrážal jej účel. Ak sa napríklad komponent stránkovania používa na navigáciu medzi množinou výsledkov vyhľadávania, vhodné označenie môže byť 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>

Práca s ikonami

Chcete použiť ikonu alebo symbol namiesto textu pre niektoré odkazy na stránkovanie? Nezabudnite poskytnúť správnu podporu čítačky obrazovky s ariaatribútmi a .sr-onlypomôckou.

<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>

Vypnuté a aktívne stavy

Odkazy na stránkovanie sú prispôsobiteľné rôznym okolnostiam. Používa .disabledsa pre odkazy, na ktoré sa nedá kliknúť, a .activena označenie aktuálnej stránky.

Aj keď sa trieda pokúša.disabled zakázať pointer-events: nonefunkciu prepojenia s, táto vlastnosť CSS ešte nie je štandardizovaná a nezohľadňuje navigáciu pomocou klávesnice. Preto by ste mali vždy pridať zakázané odkazy a použiť vlastný JavaScript, aby ste úplne zakázali ich funkčnosť.<a>tabindex="-1"

<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>

Aktívne alebo deaktivované ukotvenia môžete voliteľne vymeniť za <span>alebo vynechať ukotvenie v prípade šípok predchádzajúci/nasledujúci, aby ste odstránili funkciu klikania a zabránili zaostreniu klávesnice pri zachovaní zamýšľaných štýlov.

<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>

Dimenzovanie

Máte chuť na väčšie alebo menšie stránkovanie? Pridajte .pagination-lgalebo .pagination-smpre ďalšie veľkosti.

<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>

Zarovnanie

Zmeňte zarovnanie komponentov stránkovania pomocou nástrojov 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>