Source

Paginering

Dokumentasjon og eksempler for å vise paginering for å indikere at en serie relatert innhold finnes på flere sider.

Oversikt

Vi bruker en stor blokk med tilkoblede lenker for pagineringen vår, noe som gjør koblinger vanskelige å gå glipp av og lett skalerbare – alt samtidig som vi gir store treffområder. Paginering er bygget med liste HTML-elementer slik at skjermlesere kan kunngjøre antall tilgjengelige lenker. Bruk et innpakningselement <nav>for å identifisere det som en navigasjonsdel for skjermlesere og andre hjelpeteknologier.

I tillegg, siden sider sannsynligvis har mer enn én slik navigasjonsseksjon, er det tilrådelig å gi en beskrivelse aria-labelfor <nav>å gjenspeile formålet. Hvis for eksempel pagineringskomponenten brukes til å navigere mellom et sett med søkeresultater, kan en passende etikett være 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>

Arbeid med ikoner

Ønsker du å bruke et ikon eller symbol i stedet for tekst for noen pagineringslenker? Sørg for å gi riktig skjermleserstøtte med ariaattributter og .sr-onlyverktøyet.

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

Deaktivert og aktiv tilstand

Pagineringslenker kan tilpasses for ulike omstendigheter. Brukes .disabledfor lenker som vises som ikke-klikkbare og .activefor å indikere gjeldende side.

Mens .disabledklassen bruker pointer-events: noneå prøve å deaktivere koblingsfunksjonaliteten til <a>s, er den CSS-egenskapen ennå ikke standardisert og tar ikke hensyn til tastaturnavigasjon. Som sådan bør du alltid legge tabindex="-1"til deaktiverte lenker og bruke tilpasset JavaScript for å deaktivere funksjonaliteten fullstendig.

<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 valgfritt bytte ut aktive eller deaktiverte ankere for <span>, eller utelate ankeret i tilfelle av forrige/neste-pilene, for å fjerne klikkfunksjonalitet og forhindre tastaturfokus mens du beholder stilene.

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

Dimensjonering

Lyst på større eller mindre paginering? Legg til .pagination-lgeller .pagination-smfor flere størrelser.

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

Justering

Endre justeringen av pagineringskomponenter med flexbox-verktøy .

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