Paginasi W3.CSS


« 1 2 3 4 5 6 »

Paginasi Dasar

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menggunakan semacam pagination.

Untuk membuat pagination dasar, gunakan tombol ( w3-button ) di bilah ( w3-bar ).

Contoh

<div class="w3-bar">
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
</div>

Untuk menghilangkan spasi di antara tombol, tambahkan kelas w3-bar-item :

Contoh

<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>


Panah Pagination

Gunakan entitas atau ikon HTML dari pustaka ikon untuk menambahkan panah pagination:

« 1 2 3 4 »

Contoh

<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>



Tautan Aktif/Saat Ini

« 1 2 3 4 »

Gunakan salah satu kelas warna w3- untuk menunjukkan halaman mana pengguna berada:

Contoh

<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</a>
  <a href="#" class="w3-button w3-green">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>


Arahkan Warna

« 1 2 3 4 »

Secara default, saat Anda menggerakkan mouse di atas tautan pagination, mereka mendapatkan warna latar belakang abu-abu. Gunakan salah satu kelas warna w3-hover- untuk mengubah warna hover:

Contoh

<div class="w3-bar">
  <a href="#" class="w3-button w3-hover-purple">&laquo;</a>
  <a href="#" class="w3-button w3-hover-green">1</a>
  <a href="#" class="w3-button w3-hover-red">2</a>
  <a href="#" class="w3-button w3-hover-blue">3</a>
  <a href="#" class="w3-button w3-hover-black">4</a>
  <a href="#" class="w3-button w3-hover-orange">&raquo;</a>
</div>


Ukuran paginasi

« 1 2 3 4 »
« 1 2 3 4 »

Gunakan w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge atau w3-xxxlarge untuk mengukur pagination:

Contoh

<div class="w3-bar w3-xlarge">


Pagination Terpusat

« 1 2 3 4 »

Untuk memusatkan pagination, letakkan elemen "w3-bar" di dalam elemen "w3-center":

Contoh

<div class="w3-center">
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">&laquo;</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">&raquo;</a>
</div>
</div>


Pagination Berbatasan

« 1 2 3 4 5 »

Tambahkan kelas w3-border untuk membuat pagination dengan border:

Contoh

<div class="w3-bar w3-border">

Perbatasan Bulat

« 1 2 3 4 5 »

Tambahkan kelas w3-round di sebelah w3-border untuk rounded border:

Contoh

<div class="w3-bar w3-border w3-round">


Contoh Pagination Lainnya

Kelas w3-bar juga dapat digunakan untuk membuat tombol berikutnya/sebelumnya:


Contoh Berikutnya/Sebelumnya

<div class="w3-bar w3-border w3-round">
  <a href="#" class="w3-button">&#10094; Previous</a>
  <a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>

Contoh Menu Sebaris

<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>