MoreLesson 201Preview gratis
List Group with Badges
Lesson ini bagian dari How To · Semua level
Ringkasan
Badge pada list group menambahkan penanda angka atau status di sisi kanan setiap item, misalnya jumlah pesan belum dibaca. Tata letak flex dengan justify-content: space-between membuat teks dan badge otomatis terpisah ke ujung kiri dan kanan. Badge sendiri biasanya berbentuk pil dengan latar kontras agar mudah terlihat.
Poin kunci
- Gunakan flexbox pada item agar teks dan badge berada di ujung yang berlawanan
- Badge berbentuk pil dibuat dengan padding dan border-radius besar
- Warna badge sebaiknya kontras dengan latar item, termasuk saat item aktif
- Sertakan konteks teks atau aria-label agar angka badge tidak ambigu
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.