Paginering
Dokumentasie en voorbeelde vir die wys van paginering om aan te dui dat 'n reeks verwante inhoud oor verskeie bladsye bestaan.
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-label
vir 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>
Wil jy 'n ikoon of simbool in die plek van teks gebruik vir sommige pagineringskakels? Maak seker dat u behoorlike skermleserondersteuning verskaf met aria
eienskappe en die .sr-only
nut.
<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>
Pagineringskakels is aanpasbaar vir verskillende omstandighede. Gebruik .disabled
vir skakels wat onklikbaar lyk en .active
om die huidige bladsy aan te dui.
Terwyl die .disabled
klas pointer-events: none
probeer 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>
Lus vir groter of kleiner paginering? Voeg by .pagination-lg
of .pagination-sm
vir 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>
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>