Pagination
Nyaraka na mifano ya kuonyesha kurasa ili kuonyesha mfululizo wa maudhui yanayohusiana upo kwenye kurasa nyingi.
Tunatumia kizuizi kikubwa cha viungo vilivyounganishwa kwa utaftaji wetu, na kufanya viungo kuwa vigumu kukosa na kuongezwa kwa urahisi—yote huku tukitoa maeneo makubwa yanayogusa. Pagination imeundwa kwa orodha ya vipengele vya HTML ili wasomaji wa skrini waweze kutangaza idadi ya viungo vinavyopatikana. Tumia <nav>
kipengele cha kufunga ili kukitambulisha kama sehemu ya kusogeza kwenye visomaji vya skrini na teknolojia nyingine saidizi.
Kwa kuongezea, kwa vile kurasa zinaweza kuwa na zaidi ya sehemu moja kama hiyo ya usogezaji, inashauriwa kutoa maelezo aria-label
ili <nav>
kuonyesha madhumuni yake. Kwa mfano, ikiwa kijenzi cha uandishi kinatumika kuelekeza kati ya seti ya matokeo ya utafutaji, lebo inayofaa inaweza kuwa 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>
Je! unatafuta kutumia ikoni au ishara badala ya maandishi kwa viungo vingine vya utaftaji? Hakikisha unatoa usaidizi ufaao wa kisomaji skrini na aria
sifa na .sr-only
matumizi.
<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>
Viungo vya kurasa vinaweza kubinafsishwa kwa hali tofauti. Tumia .disabled
kwa viungo vinavyoonekana kutobofka na .active
kuashiria ukurasa wa sasa.
Wakati .disabled
darasa linatumia pointer-events: none
kujaribu kuzima utendakazi wa kiunganishi cha s, kipengele hicho cha CSS bado hakijasanifiwa<a>
na hakiwajibikii urambazaji wa kibodi. Kwa hivyo, unapaswa kuongeza kila wakati tabindex="-1"
kwenye viungo vilivyozimwa na utumie JavaScript maalum ili kuzima utendakazi wao kikamilifu.
<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>
Unaweza kubadilisha kwa hiari viunga vinavyotumika au vilivyozimwa kwa <span>
, au uondoe nanga katika hali ya vishale vilivyotangulia/vifuatavyo, ili kuondoa utendakazi wa kubofya na kuzuia umakini wa kibodi huku ukihifadhi mitindo iliyokusudiwa.
<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>
Je, ungependa kutengeneza kurasa kubwa au ndogo zaidi? Ongeza .pagination-lg
au .pagination-sm
kwa saizi za ziada.
<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>
Badilisha mpangilio wa vipengee vya pagination na huduma za flexbox .
<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>