Pada tutorial sebelumnya, kita telah mempelajari bagaimana cara membuat list item pada Bootstrap 5.
Pada tutorial kali ini, kita akan mempelajari cara pembuatan List Group Bootstrap 5.
Lalu, apa perbedaan antara list item dengan list group ini?
Pada list item, daftar list akan tampil dan terperinci berdasarkan simbol khusus sesuai dengan style yang digunakan.
Misal untuk list <ul> daftar rinciannya akan tampil dengan tanda •, - , º dsb. Sedangkan untuk <ol> rinciannya akan tampil dengan urutan angka.
Didalam list group ini, daftar rincian atau list yang tampil, akan terbungkus dalam bentuk baris tabel.
Untuk lebih jelasnya, mari kita simak tutorial berikut.
1. Default List Group
Default list group akan memberikan tampilan list group dalam keadaan asal / default.
Kita hanya perlu menambahkan class .list-group pada parents list-nya, lalu class .list-group-item untuk tiap-tiap listnya.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< li class= "list-group-item"> Downloads</ li>
< li class= "list-group-item"> Documents</ li>
< li class= "list-group-item"> Picture</ li>
< li class= "list-group-item"> Music</ li>
< li class= "list-group-item"> Videos</ li>
</ ul>
</ div>
About this PC:
- Downloads
- Documents
- Picture
- Music
- Videos
Secara default akan tampil dengan lebar 100%.
Selanjutnya, kita juga dapat meng-custom lebar menggunakan class width: w-25, w-50, w-75, dsb.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group w-50">
< li class= "list-group-item"> Downloads</ li>
< li class= "list-group-item"> Documents</ li>
< li class= "list-group-item"> Picture</ li>
< li class= "list-group-item"> Music</ li>
< li class= "list-group-item"> Videos</ li>
</ ul>
</ div>
Menghasilkan tampilan.
About this PC:
- Downloads
- Documents
- Picture
- Music
- Videos
2. Numbered List Group
Numbered list group merupakan list group yang item-nya terurut berdasarkan angka, atau yang biasa kita kenal sebagai ordered list.
Untuk membuat numbered list group ini, dapat kita tambahkan class .list-group-numbered pada parents list-nya.
perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group list-group-numbered w-75">
< li class= "list-group-item"> Downloads</ li>
< li class= "list-group-item"> Documents</ li>
< li class= "list-group-item"> Picture</ li>
< li class= "list-group-item"> Music</ li>
< li class= "list-group-item"> Videos</ li>
</ ul>
</ div>
About this PC:
- Downloads
- Documents
- Picture
- Music
- Videos
3. Edge-to-Edge List Group
Untuk tampilan list group yang lebih terlihat bersih dan rapi, kita dapat menggunakan Edge-to-Edge list group.
Untuk membuat tampilan list group ini, kita dapat menambahkan class .list-group-flush yang berfungsi untuk menghapus border atau tepi group tersebut.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group list-group-flush w-25">
< li class= "list-group-item"> Downloads</ li>
< li class= "list-group-item"> Documents</ li>
< li class= "list-group-item"> Picture</ li>
< li class= "list-group-item"> Music</ li>
< li class= "list-group-item"> Videos</ li>
</ ul>
</ div>
About this PC:
- Downloads
- Documents
- Picture
- Music
- Videos
Maka, akan tampil list group tanpa boder pada tiap sisinya.
4. Badges List Group
Badges list group merupakan tampilan list yang menyertakan suatu badge atau penanda khusus untuk tiap list item-nya.
Untuk membuat badge list, dapat kita tambahkan tag <span> dengan class .badge didalam tag <li></li>.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< li class= "list-group-item"> Downloads < span class= "badge bg-secondary float-end"> 128</ span> </ li>
< li class= "list-group-item"> Documents < span class= "badge bg-secondary float-end"> 12</ span</ li>
< li class= "list-group-item"> Picture < span class= "badge bg-secondary float-end"> 28</ span</ li>
< li class= "list-group-item"> Music < span class= "badge bg-secondary float-end"> 23</ span</ li>
< li class= "list-group-item"> Videos < span class= "badge bg-secondary float-end"> 10</ span</ li>
</ ul>
</ div>
About this PC:
- Downloads 128
- Documents 12
- Picture 28
- Music 23
- Videos 10
Kita dapat menambahkan class .bg-* untuk memberikan warna pada badge tersebut. Karena secara default berwarna putih, sehingga seolah-olah tidak tampil sewaktu kita run.
Lalu, kita berikan class .float-end agar rata kanan dan terlihat rapi.
5. Linked List Group
Linked list group merupakan suatu list group yang didalamnya memuat data dalam bentuk link.
Jika sebelumnya kita membuat list dengan tag <li>, maka untuk linked list kita gunakan tag <a></a>.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< a href= "#" class= "list-group-item"> Home</ a>
< a href= "#" class= "list-group-item"> Picture</ a>
< a href= "#" class= "list-group-item"> Music</ a>
< a href= "#" class= "list-group-item"> Videos</ a>
</ ul>
</ div>
Kita juga dapat membuat linked list group dengan tampilan yang lebih menarik.
Dapat kita tambahkan icon dan badge untuk tiap-tiap list item-nya.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< a href= "#" class= "list-group-item"> < i class= "bi-house-fill"> </ i> Home < span class= "badge bg-secondary float-end"> 128</ span> </ a>
< a href= "#" class= "list-group-item"> < i class= "bi-camera-fill"> </ i> Picture < span class= "badge bg-secondary float-end"> 25</ span</ a>
< a href= "#" class= "list-group-item"> < i class= "bi-music-note-beamed"> </ i> Music < span class= "badge bg-secondary float-end"> 17</ span</ a>
< a href= "#" class= "list-group-item"> < i class= "bi-film"> </ i> Videos < span class= "badge bg-secondary float-end"> 3</ span</ a>
</ ul>
</ div>
About this PC:
Untuk membuat icon, tambahkan link berikut diantara tag <head></head> html : <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
Active and Disabled Items
Selanjutnya, kita juga dapat membuat link pada list group tampil active dan disable.
Kita cukup menambahkan class .active untuk item list yang aktif, dan class .disabled untuk item list yang disable.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< a href= "#" class= "list-group-item active"> < i class= "bi-house-fill"> </ i> Home < span class= "badge bg-secondary float-end"> 128</ span> </ a>
< a href= "#" class= "list-group-item"> < i class= "bi-camera-fill"> </ i> Picture < span class= "badge bg-secondary float-end"> 25</ span</ a>
< a href= "#" class= "list-group-item"> < i class= "bi-music-note-beamed"> </ i> Music < span class= "badge bg-secondary float-end"> 17</ span</ a>
< a href= "#" class= "list-group-item disabled"> < i class= "bi-film"> </ i> Videos < span class= "badge bg-secondary float-end"> 3</ span</ a>
</ ul>
</ div>
About this PC:
6. Custom Content List Group
Pada custom content list group ini, kita dapat membuat list dengan isi atau konten yang dapat kita tentukan sendiri.
Bootstrap sendiri telah menyediakan class .list-group-item-heading untuk elemen judul dan class .list-group-item-text untuk elemen isinya.
Perhatikan program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< li class= "list-group-item">
< h4 class= "list-group-item-heading"> Downloads</ h4>
< p class= "list-group-item-text"> Downloads merupakan direktori bawaan dari windows yang secara default akan menyimpan file-file yang kita unduh dari internet.</ p>
</ li>
< li class= "list-group-item">
< h4 class= "list-group-item-heading"> Downloads</ h4>
< p class= "list-group-item-text"> Picture merupakan direktori bawaan dari windows yang didalamnya berisi file-file gambar.</ p>
</ li>
< li class= "list-group-item">
< h4 class= "list-group-item-heading"> Downloads</ h4>
< p class= "list-group-item-text"> Music merupakan direktori yang didalamnya memuat file-file musik.</ p>
</ li>
</ ul>
</ div>
About this PC:
-
Downloads
Downloads merupakan direktori bawaan dari windows yang secara default akan menyimpan file-file yang kita unduh dari internet.
-
Picture
Picture merupakan direktori bawaan dari windows yang didalamnya berisi file-file gambar.
-
Music
Music merupakan direktori yang didalamnya memuat file-file musik.
7. Contextual Classes List Group
Bagi kalian yang menyukai tampilan yang berwarna-warna, dapat kalian gunakan list group dengan model contextual classes.
Perhatika program berikut.
< div class= "container rounded-3 bg-light p-4 shadow-sm">
< h5> About this PC:</ h5>
< ul class= "list-group">
< li class= "list-group-item list-group-item-info"> Downloads</ li>
< li class= "list-group-item list-group-item-secondary"> Documents</ li>
< li class= "list-group-item list-group-item-warning"> Picture</ li>
< li class= "list-group-item list-group-item-success"> Music</ li>
< li class= "list-group-item list-group-item-danger"> Videos</ li>
</ ul>
</ div>
About this PC:
- Downloads
- Documents
- Picture
- Music
- Videos
Pada contextual classes ini, pada tiap list item-nya terdapat dua class .list-group-item yang harus kita inputkan.
.list-group-item yang pertama untuk membuat list group-nya.
.list-group-item-* yang kedua untuk membuat tampilan warnanya.
Itulah tadi tutorial serta pembahasan tentang Bagaimana cara membuat list groups pada Bootstrap 5.
Pada Intinya, untuk membuat list group kita cukup menambahkan class .list-group pada parent-tag-nya dan juga .list-item-group pada tiap list item-nya.
Post a Comment
Post a Comment