Source

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-labelpikeun <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 ariaatribut sareng .sr-onlyutilitas.

<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">&laquo;</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Kaayaan ditumpurkeun sareng aktip

Tumbu pagination tiasa disaluyukeun pikeun kaayaan anu béda. Anggo .disabledpikeun tautan anu katingali teu tiasa diklik sareng .activenunjukkeun halaman ayeuna.

Bari .disabledkelas ngagunakeun pointer-events: nonepikeun 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" 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>

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">
      <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>

Ukuran

Fancy pagination gedé atawa leutik? Tambihkeun .pagination-lgatanapi .pagination-smkanggo ukuran tambahan.

<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>

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" 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>