GridLesson 313Preview gratis
List Grid View
Lesson ini bagian dari How To · Semua level
Ringkasan
Tombol list/grid view memungkinkan pengguna memilih tampilan daftar yang ringkas atau tampilan grid yang lebih visual. JavaScript cukup menambahkan atau menghapus kelas pada kontainer, lalu CSS mengatur ulang tata letaknya. Simpan pilihan pengguna di localStorage agar tampilan tetap sama saat halaman dibuka kembali.
Poin kunci
- Satu kontainer menampung item yang sama untuk kedua mode
- Kelas pada kontainer menentukan apakah item disusun sebagai list atau grid
- Tombol toggle memperbarui kelas dan status aria-pressed
- localStorage dapat menyimpan preferensi tampilan pengguna
- Pastikan kedua mode tetap responsif dan mudah dinavigasi
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.