Paginering
Dokumentasjon og eksempler for å vise paginering for å indikere at en serie relatert innhold finnes på flere sider.
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-label
for <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>
Ønsker du å bruke et ikon eller symbol i stedet for tekst for noen pagineringslenker? Sørg for å gi riktig skjermleserstøtte med aria
attributter og .sr-only
verktø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">«</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Pagineringslenker kan tilpasses for ulike omstendigheter. Brukes .disabled
for lenker som vises som ikke-klikkbare og .active
for å indikere gjeldende side.
Mens .disabled
klassen 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>
Lyst på større eller mindre paginering? Legg til .pagination-lg
eller .pagination-sm
for 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>
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>