Paginasi W3.CSS
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">«</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">»</a>
</div>
Panah Pagination
Gunakan entitas atau ikon HTML dari pustaka ikon untuk menambahkan panah pagination:
Contoh
<div class="w3-bar">
<a href="#" class="w3-button">«</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">»</a>
</div>
Tautan Aktif/Saat Ini
Gunakan salah satu kelas warna w3- untuk menunjukkan halaman mana pengguna berada:
Contoh
<div class="w3-bar">
<a href="#" class="w3-button">«</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">»</a>
</div>
Arahkan Warna
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">«</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">»</a>
</div>
Ukuran paginasi
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
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">«</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">»</a>
</div>
</div>
Pagination Berbatasan
Tambahkan kelas w3-border untuk membuat pagination dengan border:
Contoh
<div class="w3-bar
w3-border">
Perbatasan Bulat
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">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</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>