Amakhasi
Amadokhumenti nezibonelo zokubonisa ukuphequlula ukuze kuboniswe uchungechunge lokuqukethwe okuhlobene lukhona kumakhasi amaningi.
Uhlolojikelele
Sisebenzisa ibhulokhi enkulu yezixhumanisi ezixhunyiwe ukuze senze amaqebelengwane ethu, okwenza izixhumanisi kube nzima ukuzigeja futhi zikhule kalula—konke lokhu kuhlinzeka ngezindawo ezinkulu ezishayekayo. I-Pagination yakhiwe ngezinto ze-HTML zohlu ukuze abafundi besikrini bakwazi ukumemezela inombolo yezixhumanisi ezitholakalayo. Sebenzisa into egoqayo <nav>
ukuze uyikhombe njengesigaba sokuzulazula kuzifundi zesikrini nobunye ubuchwepheshe obusizayo.
Ngaphezu kwalokho, njengoba amakhasi anengxenye enjalo yokuzulazula engaphezu kweyodwa, kuyatuseka ukunikeza incazelo aria-label
ukuze <nav>
ibonise injongo yayo. Isibonelo, uma ingxenye ye-pagination isetshenziselwa ukuzulazula phakathi kwesethi yemiphumela yosesho, ilebula efanelekile ingaba 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>
Ukusebenza ngezithonjana
Ingabe ufuna ukusebenzisa isithonjana noma uphawu esikhundleni sombhalo kwezinye izixhumanisi zamaphegina? Qiniseka ukuthi unikeza usekelo olufanele lwesifundi sesikrini ngezibaluli aria
.
<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>
</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>
</a>
</li>
</ul>
</nav>
Izimo ezikhubazekile nezisebenzayo
Izixhumanisi zamakhasi zingenziwa ngendlela oyifisayo ezimeni ezahlukene. Sebenzisa .disabled
izixhumanisi ezibonakala zingachofozeki kanye .active
nokukhombisa ikhasi lamanje.
Ngenkathi .disabled
ikilasi lisebenzisa pointer-events: none
ukuzama ukukhubaza ukusebenza kwesixhumanisi kwe- <a>
s, leso sici se-CSS asikakamiswa futhi asibali ukuzulazula kwekhibhodi. Kanjalo, kufanele uhlale ungeza tabindex="-1"
kuzixhumanisi ezikhutshaziwe futhi usebenzise i-JavaScript yangokwezifiso ukuze ukhubaze ngokugcwele ukusebenza kwazo.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>
Ungakwazi ukukhetha ukushintsha amahange asebenzayo noma avaliwe wenze okuthi <span>
, noma ushiye ihange esimweni semicibisholo eyandulele/elandelayo, ukuze ususe ukusebenza kokuchofoza futhi uvimbele ukugxila kwekhibhodi kuyilapho ugcina izitayela ezihlosiwe.
- Ngaphambilini
- 1
- 2
- 3
- Olandelayo
<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" aria-current="page">
<span class="page-link">2</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>
Ukulinganisa
Uyathanda ukuqanjwa okukhudlwana noma okuncane? Engeza .pagination-lg
noma .pagination-sm
osayizi abengeziwe.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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 active" aria-current="page">
<span class="page-link">1</span>
</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>
Ukuqondanisa
Shintsha ukuqondanisa kwezingxenye zephegination ngezinsiza ze- flexbox .
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">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">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>