Belajar Materialize #13 : Pagination pada Materialize

Belajar Materialize #13 : Pagination pada Materialize – Hai sahabat kodingin, sampai jumpa lagi di tutoroal belajar materialize menggunakan bahasa Indonesia. Sekarang kita masuk pada tahap yang ke 13, dimana akan membahas pagination pada mterialize.

Untuk membuat pagination elemen HTML yang di perlukan yaitu List dan Link, jika belum silahkan anda pelajari terlebih dahulu tentang “cara menggunakan Link dan List pada HTML”.

Pagination pada Materialize

Pagination adalah pembagian konten yang telah ditentukan jumlah , hal ini berguna untuk mempercepat loading halaman website.

Bayanngkan kita kita punya 1000 data di load bersamaan, maka akan membuat lambat proses menampilkan data.

Cara Membuat Pagination di Materialize

Materialize menyediakan komponen yang berfungis untuk “membuat pagination halaman website”, tentunya tampilannya sangat menarik.

Penggunaan pagination menggunakan tag HTML list, dimana menggunakan class dengan nama .pagination untuk bagian pembuka list.

Sedangkan untuk untuk label pagination kita di bebaskan untuk memakai class apa saja, asalkan di dalamnya terdapat link.

Langsung saja kita praktekan.

Berikut ini contoh kode membuat pagination pada Materialize.

Perhatikan kode diatas, jumlah pagination adalah 8, dan aktiv pada halaman satu, untuk membuat agar tampilannya aktif, dimana akan menggunakan warna latar yang berbeda harus menambahkan class .active.

Sekarang, silahkan buka di browser anda dan lihat hasilnya.

Belajar Materialize #13 : Pagination pada Materialize
Cara Membuat Pagination di Materialize

Perhatikan gambar diatas, terlihat jelas bahwa link yang aktiv mempunya latar belakang dengan warna yang berbeda yaitu merah. Selain itu juga terdapat 2 icon yang berfungsi untuk menampilkan data sebelumnya dan selanjutnya.

Kesimpulan…

Untuk membuat pagintion di materialize menggunakan class dengan nama .pagintion. Elemen yang di dalam pagination berupa list kemudian di ikuti link pada Tag HTML.

Untuk membuat latar belakang menjadi aktiv dapat menggunakan class dengan nama .active.

Baca Juga…

Leave a Reply