Source

Pagination

Dokumentasi lan conto kanggo nuduhake pagination kanggo nunjukake seri isi sing gegandhengan ana ing pirang-pirang kaca.

Ringkesan

Kita nggunakake blok gedhe saka pranala sing disambungake kanggo pagination kita, nggawe pranala hard kanggo kantun lan gampang keukur-kabeh nalika nyedhiyani wilayah hit gedhe. Pagination dibangun kanthi dhaptar unsur HTML supaya pembaca layar bisa ngumumake jumlah tautan sing kasedhiya. Gunakake unsur bungkus <nav>kanggo ngenali minangka bagean navigasi kanggo maca layar lan teknologi pitulung liyane.

Kajaba iku, amarga kaca bisa uga duwe luwih saka siji bagean navigasi, luwih becik menehi deskriptif aria-labelkanggo <nav>nggambarake tujuane. Contone, yen komponen pagination digunakake kanggo navigasi antarane sakumpulan asil panelusuran, label sing cocog bisa uga 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>

Nggarap lambang

Nggolek nggunakake lambang utawa simbol ing panggonan teks kanggo sawetara pranala pagination? Priksa manawa sampeyan nyedhiyakake dhukungan maca layar sing cocog karo ariaatribut lan .sr-onlysarana.

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

Negara sing dipateni lan aktif

Tautan pagination bisa disesuaikan kanggo macem-macem kahanan. Gunakake .disabledkanggo pranala sing katon ora bisa diklik lan .activekanggo nuduhake kaca saiki.

Nalika .disabledkelas digunakake pointer-events: nonekanggo nyoba kanggo mateni fungsi link saka <a>s, sing properti CSS durung standar lan ora akun kanggo pandhu arah keyboard. Dadi, sampeyan kudu tansah nambah tabindex="-1"pranala sing dipateni lan nggunakake JavaScript khusus kanggo mateni fungsine.

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

Sampeyan opsional bisa ngganti jangkar aktif utawa dipatèni kanggo <span>, utawa ngilangi jangkar ing cilik saka prev / panah sabanjuré, kanggo mbusak fungsi klik lan nyegah fokus keyboard nalika nahan gaya dimaksudaké.

<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

Pengin pagination luwih gedhe utawa luwih cilik? Tambah .pagination-lgutawa .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>

Alignment

Ngganti keselarasan komponen pagination kanthi utilitas 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>