Source

paginasi

Dokumentasi dan contoh untuk menampilkan pagination untuk menunjukkan serangkaian konten terkait yang ada di beberapa halaman.

Ringkasan

Kami menggunakan blok besar tautan terhubung untuk pagination kami, membuat tautan sulit untuk dilewatkan dan mudah diskalakan—semuanya sambil menyediakan area hit yang besar. Pagination dibuat dengan elemen HTML daftar sehingga pembaca layar dapat mengumumkan jumlah tautan yang tersedia. Gunakan elemen pembungkus <nav>untuk mengidentifikasinya sebagai bagian navigasi untuk pembaca layar dan teknologi bantu lainnya.

Selain itu, karena halaman kemungkinan memiliki lebih dari satu bagian navigasi seperti itu, sebaiknya berikan deskripsi aria-labeluntuk <nav>mencerminkan tujuannya. Misalnya, jika komponen pagination digunakan untuk menavigasi di antara sekumpulan hasil penelusuran, label yang sesuai dapat berupa 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>

Bekerja dengan ikon

Ingin menggunakan ikon atau simbol sebagai pengganti teks untuk beberapa tautan pagination? Pastikan untuk memberikan dukungan pembaca layar yang tepat dengan ariaatribut dan .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>

Status dinonaktifkan dan aktif

Tautan pagination dapat disesuaikan untuk keadaan yang berbeda. Gunakan .disableduntuk tautan yang tampak tidak dapat diklik dan .activeuntuk menunjukkan halaman saat ini.

Sementara .disabledkelas menggunakan pointer-events: noneuntuk mencoba menonaktifkan fungsionalitas tautan <a>s, properti CSS itu belum distandarisasi dan tidak memperhitungkan navigasi keyboard. Karena itu, Anda harus selalu menambahkan tabindex="-1"tautan yang dinonaktifkan dan menggunakan JavaScript khusus untuk sepenuhnya menonaktifkan fungsinya.

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

Anda dapat secara opsional menukar jangkar aktif atau dinonaktifkan untuk <span>, atau menghilangkan jangkar dalam kasus panah sebelumnya/berikutnya, untuk menghapus fungsionalitas klik dan mencegah fokus keyboard sambil mempertahankan gaya yang diinginkan.

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

Perekat

Ingin pagination yang lebih besar atau lebih kecil? Tambahkan .pagination-lgatau .pagination-smuntuk 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>

Penyelarasan

Ubah perataan komponen pagination dengan 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>