Source

Paginering

Dokumentation och exempel för att visa paginering för att indikera att en serie relaterat innehåll finns på flera sidor.

Översikt

Vi använder ett stort block med anslutna länkar för vår paginering, vilket gör länkar svåra att missa och lätt skalbara – allt samtidigt som vi tillhandahåller stora träffområden. Paginering är byggd med lista med HTML-element så att skärmläsare kan meddela antalet tillgängliga länkar. Använd ett omslagselement <nav>för att identifiera det som ett navigeringsavsnitt för skärmläsare och andra hjälpmedel.

Dessutom, eftersom sidor sannolikt har mer än ett sådant navigeringsavsnitt, är det tillrådligt att tillhandahålla en beskrivande aria-labelför <nav>att återspegla dess syfte. Om sidnumreringskomponenten till exempel används för att navigera mellan en uppsättning sökresultat kan en lämplig etikett vara 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>

Arbeta med ikoner

Vill du använda en ikon eller symbol i stället för text för några sideringslänkar? Se till att tillhandahålla korrekt skärmläsarstöd med ariaattribut och .sr-onlyverktyget.

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

Inaktiverade och aktiva tillstånd

Pagineringslänkar är anpassningsbara för olika omständigheter. Använd .disabledför länkar som verkar oklickbara och .activeför att indikera den aktuella sidan.

Medan .disabledklassen pointer-events: noneförsöker inaktivera länkfunktionen för s<a> , är den CSS-egenskapen ännu inte standardiserad och tar inte hänsyn till tangentbordsnavigering. Som sådan bör du alltid lägga tabindex="-1"till inaktiverade länkar och använda anpassad JavaScript för att helt inaktivera deras funktionalitet.

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

Du kan valfritt byta ut aktiva eller inaktiverade ankare mot <span>, eller utelämna ankaret i fallet med föregående/nästa pilar, för att ta bort klickfunktionalitet och förhindra tangentbordsfokus samtidigt som du behåller avsedda stilar.

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

Dimensionering

Vill du ha större eller mindre paginering? Lägg till .pagination-lgeller .pagination-smför ytterligare storlekar.

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

Inriktning

Ändra justeringen av sideringskomponenter med flexbox-verktyg .

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