Pagination
Dokuméntasi sareng conto pikeun nunjukkeun pagination pikeun nunjukkeun séri eusi anu aya hubunganana dina sababaraha halaman.
Ihtisar
Urang ngagunakeun blok badag tina Tumbu disambungkeun pikeun pagination urang, nyieun Tumbu teuas sono tur gampang scalable-sadayana bari nyadiakeun wewengkon hit badag. Pagination diwangun ku elemen HTML daptar jadi pamiarsa layar bisa ngumumkeun jumlah Tumbu sadia. Anggo unsur bungkus <nav>
pikeun ngaidentipikasi éta salaku bagian navigasi pikeun layar pamiarsa sareng téknologi pitulung anu sanés.
Salaku tambahan, kusabab halaman sigana gaduh langkung ti hiji bagian navigasi sapertos kitu, disarankeun pikeun masihan deskriptif aria-label
pikeun <nav>
ngagambarkeun tujuanana. Contona, upami komponén pagination dipaké pikeun nganapigasi antara susunan hasil teangan, labél luyu bisa jadi 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>
Gawe sareng ikon
Pilari ngagunakeun ikon atawa simbol dina tempat téks pikeun sababaraha tumbu pagination? Pastikeun pikeun nyayogikeun pangrojong pamaca layar anu leres sareng aria
atribut.
<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>
Kaayaan ditumpurkeun sareng aktip
Tumbu pagination tiasa disaluyukeun pikeun kaayaan anu béda. Anggo .disabled
pikeun tautan anu katingali teu tiasa diklik sareng .active
nunjukkeun halaman ayeuna.
Bari .disabled
kelas ngagunakeun pointer-events: none
pikeun nyobaan mareuman fungsionalitas link <a>
s, éta sipat CSS teu acan standarisasi sarta henteu akun pikeun navigasi keyboard. Sapertos kitu, anjeun kedah salawasna nambihan tabindex="-1"
tautan anu ditumpurkeun sareng nganggo JavaScript khusus pikeun nganonaktipkeun fungsionalitasna.
<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>
Anjeun optionally bisa swap kaluar anchors aktip atawa ditumpurkeun pikeun <span>
, atawa ngaleungitkeun jangkar dina kasus prev / panah salajengna, pikeun miceun fungsionalitas klik jeung nyegah fokus keyboard bari nahan gaya dimaksudkeun.
<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>
Ukuran
Fancy pagination gedé atawa leutik? Tambihkeun .pagination-lg
atanapi .pagination-sm
kanggo ukuran tambahan.
<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>
Ngajajar
Ngarobah alignment komponén pagination kalawan flexbox utiliti .
<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>