Belajar Materialize #14 : Collections / List pada Materialize

Belajar Materialize #14 : Collections / List pada Materialize – Halo sahabat kodingin, samapa jumpa kembali di seri “tutorial belajar materialize menggunakan bahasa Indonesia”. Saat ini sudah sampai pada tutorial ke 14.

Pada Tutorial ke 14 ini akan membahas list pada materialize, list atau di sebut collection merupakan sebuah daftar menu yang berisi label teks.

Untuk membuat List pada Materialize dapat menggunakan tag UL pada HTML dan di lanjutkan dengan li. Perlu di ketahui untuk membuat list bisa juga menggunakan elemen DIV namun tetap menggunakan class yang sama yaitu .collection. Selain itu kita juga dapat membuat list berupa link maupun gambar.

Yuk kita bahas.

Membuat List pada Materialize

List adalah penggabungan / grup antara daftar satu dengan daftar lainnya.

Langsung saja mari kita buat list sederhana, berikut ini kode untuk membuat list.

Perhatikan kode diatas, terdapat class dengan nama .collection untuk menggunakan collection list pada Materialize.

Sekarang mari kita lihat hasilnya.

Membuat List pada Materialize
Membuat List pada Materialize

Nah, sekarang kita sudah berhasil membuat daftar list sederhana

List dengan Link

Pada Contoh “membuat list pada materialize” pertama kita sudah berhasil menampilkan daftar list saja, namun tidak memberikan Link yang bisa di klik untuk pindah ke halaman lain.

Sekarang mari kita buat list dengan Link materialize.

Perhatikan kode diatas, kode yang digunakan hampir sama, namun yang perlu di ganti yaitu kita tidak memakai tag UL li lagi melainkan menggunakan div dan link.

Untuk membuat link aktive dapat menggunakan class .active.

Sekarang mari kita lihat hasilnya.

List dengan Link
List dengan Link

Perhatikan gambar diatas, list yang kita buat berupa link yang bisa di klik dan link yang telah aktiv berwarna berda dengan yang lain yakni hijau.

List dengan Avatar / Gambar

Ada kalanya kita membutuhkan daftar dimana harus menggunakan sebuah gambar / avatar untuk membuat halaman website, contohnya pada chatting di whatsapp web.

Berikut ini contoh list dengan gambar materialize.

Perhatikan kode diatas, kode diatas menggunakan avatar yang berasal dari material icon nya google yang pernah kita bahas sebelumnya.

Masih sama, kita menggunakan class dengan nama .collection dan menggunakan Tag HTML yaitu UL list.

Sekarang mari kita lihat hasilnya.

List dengan Avatar /  Gambar
List dengan Avatar / Gambar

Perhatikan kode diatas, tampilan di atas contoh tampilan interface web aplikasi chatting. Terlihat jelas terdapat Icon pada sebelah kiri list dan diikuti dengan judul serta isi pesan.

Kesimpulan…

Untuk membaut list dapat menggunakan class dengan nama .collection. Penggunaan list dapat di terapkan daftar biasa, link maupun menggunakan gambar.

Jadi bukan hanya bisa menggunakan Tag HTML UL list namun juga dapat menggunakan elemen HTML laiinnya.

Baca Juga…

Avatar
Didik
Saya Seorang Developer khususnya pada Bidang Website menggunakan Sistem Operasi Linux dan menyukai Pemrograman Website dan System Administrator. Selain itu saya pemilik website kodingin.com.

2 Comments

  1. […] Belajar Materialize #14 : Collections / List pada Materialize […]

  2. […] Belajar Materialize #14 : Collections / List pada Materialize […]

Leave a Reply