Source

Paginering

Dokumentasie en voorbeelde vir die wys van paginering om aan te dui dat 'n reeks verwante inhoud oor verskeie bladsye bestaan.

Oorsig

Ons gebruik 'n groot blok gekoppelde skakels vir ons paginering, wat skakels moeilik maak om te mis en maklik skaalbaar maak—dit alles terwyl ons groot trefareas verskaf. Paginering is gebou met lys HTML-elemente sodat skermlesers die aantal beskikbare skakels kan aankondig. Gebruik 'n toevou <nav>-element om dit as 'n navigasie-afdeling vir skermlesers en ander ondersteunende tegnologieë te identifiseer.

Daarbenewens, aangesien bladsye waarskynlik meer as een so 'n navigasie-afdeling het, is dit raadsaam om 'n beskrywing te verskaf aria-labelvir die <nav>om die doel daarvan te weerspieël. Byvoorbeeld, as die paginering-komponent gebruik word om tussen 'n stel soekresultate te navigeer, kan 'n gepaste etiket wees 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>

Werk met ikone

Wil jy 'n ikoon of simbool in die plek van teks gebruik vir sommige pagineringskakels? Maak seker dat u behoorlike skermleserondersteuning verskaf met ariaeienskappe en die .sr-onlynut.

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

Gestremde en aktiewe state

Pagineringskakels is aanpasbaar vir verskillende omstandighede. Gebruik .disabledvir skakels wat onklikbaar lyk en .activeom die huidige bladsy aan te dui.

Terwyl die .disabledklas pointer-events: noneprobeer om die skakelfunksionaliteit van <a>s te deaktiveer, is daardie CSS-eienskap nog nie gestandaardiseer nie en maak nie rekening met sleutelbordnavigasie nie. As sodanig moet jy altyd tabindex="-1"gedeaktiveerde skakels byvoeg en pasgemaakte JavaScript gebruik om hul funksionaliteit ten volle te deaktiveer.

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

Jy kan opsioneel aktiewe of gedeaktiveerde ankers uitruil vir <span>, of die anker weglaat in die geval van die vorige/volgende pyle, om kliekfunksionaliteit te verwyder en sleutelbordfokus te voorkom terwyl beoogde style behou word.

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

Grootte

Lus vir groter of kleiner paginering? Voeg by .pagination-lgof .pagination-smvir addisionele groottes.

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

Belyning

Verander die belyning van pagineringskomponente met flexbox-nutsprogramme .

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