MoreLesson 186Preview gratis
Contact Chips
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas contact chip, yaitu elemen kecil berisi avatar dan nama kontak yang dapat dihapus. Chip sering digunakan pada kolom penerima email atau anggota tim, dan beberapa chip dapat membungkus ke baris berikutnya. Tombol hapus perlu memiliki label yang jelas agar pengguna tahu kontak mana yang akan dihapus.
Poin kunci
- Susun chip dengan flexbox dan izinkan flex-wrap agar beberapa chip dapat berpindah baris
- Gunakan gambar avatar dengan alt kosong bila nama sudah menjelaskan kontak
- Tombol hapus sebaiknya memiliki aria-label yang menyebut nama kontak
- Saat menambah chip dari input, gunakan textContent dan bersihkan input setelah ditambahkan
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.