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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Membuat List Materialize | Kodingin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body> <div class="container"> <h3>Membuat List Dengan Framework Materialize</h3> <ul class="collection"> <li class="collection-item">Belajar PHP</li> <li class="collection-item">Belajar CSS</li> <li class="collection-item">Belajar Golang</li> <li class="collection-item">Belajar jS</li> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js" ></script> </body> </html> |
Perhatikan kode diatas, terdapat class dengan nama .collection untuk menggunakan collection list pada Materialize.
Sekarang mari kita lihat hasilnya.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Membuat List Materialize | Kodingin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body> <div class="container"> <h3>Membuat List Dengan Framework Materialize</h3> <ul class="collection"> <a class="collection-item">Belajar PHP</a> <a class="collection-item">Belajar CSS</a> <a class="collection-item active">Belajar Golang</a> <a class="collection-item">Belajar jS</a> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js" ></script> </body> </html> |
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.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Membuat List Materialize | Kodingin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> </head> <body> <div class="container"> <h3>Membuat List Dengan Framework Materialize</h3> <ul class="collection"> <li class="collection-item avatar"> <i class="material-icons circle">folder</i> <span class="title"> Charly</span> <p> Oke Om... </p> <a href="#!" class="secondary-content" ><i class="material-icons">grade</i></a > </li> <li class="collection-item avatar"> <i class="material-icons circle green">insert_chart</i> <span class="title"> Aura Kasih</span> <p> Lagi sip-siap .. </p> <a href="#!" class="secondary-content" ><i class="material-icons">grade</i></a > </li> </ul> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js" ></script> </body> </html> |
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.
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…
- Belajar Materialize #13 : Pagination pada Materialize
- Belajar Materialize #12 : Breadcrumbs pada Materialize
- Beberapa Teknologi yang Menopang Kemajuan Revolusi Industri 4.0
- Belajar Materialize #11 : Badges pada Materialize
- Belajar Materialize #10 : Menggunakan Icon Materialize
Related Posts
Belajar Materialize #6 : Membuat Tombol Button Materialize
Belajar Materialize #11 : Badges pada Materialize
Belajar Materialize #16 : Membuat Footer pada Materialize
Belajar Materialize #4 : Cara Menggunakan Sistem Grid Materialize
Belajar Materialize #17 : Cara membuat Modal pada Materialize
Belajar Materialize #20 : Membuat Carousel Materialize
Belajar Materialize #1 : Pengenalan dan Pengertian Materialize
Belajar Materialize #2 : Cara Install dan menggunakan Materialize
[…] Belajar Materialize #14 : Collections / List pada Materialize […]
[…] Belajar Materialize #14 : Collections / List pada Materialize […]