Tut Wuri HandayaniSeragam Design System

Menu

List

Komponen antarmuka yang digunakan untuk menyusun dan menampilkan informasi dalam format yang terorganisir, baik berupa satu atribut data sederhana maupun kombinasi beberapa atribut data. Komponen ini dirancang untuk mempermudah pengguna membaca, memahami, atau mengakses informasi yang dikelompokkan dalam satu jenis yang sama.

Anatomi

List-Anatomy

Jenis dan variasi

Atribut data

Variasi pada List bergantung pada jenis data yang ditampilkan:

  • Satu atribut: Menampilkan satu jenis data dalam bentuk teks saja.
    Contoh: Daftar nama pengguna.
  • Beberapa atribut: Menampilkan kombinasi data, seperti teks dan gambar.
    Contoh: Daftar produk dengan nama, harga, dan foto.

list-basic usage

list-with artwork

Tambahan komponen interaktif

List dapat ditambahkan komponen interaktif seperti tombol, ikon, atau label untuk menunjukkan bahwa pengguna dapat berinteraksi dengan item di dalam List.
Contoh: Tombol "hapus" atau ikon "info" di setiap item list.

list-enhancer

Behaviors

Umpan balik visual

Secara default, List tidak memiliki state atau umpan balik visual yang khas. Namun, komponen ini dapat dikustomisasi sesuai kebutuhan desain, misalnya dengan highlight saat List dipilih.

Interaksi

  • List biasanya hanya digunakan untuk menampilkan data.
  • Interaksi umum meliputi klik untuk membuka halaman baru atau memunculkan Modal.
  • List tidak mendukung interaksi kompleks seperti expand atau collapse secara default.

Panduan penggunaan

Kapan menggunakan List

  • Cocok untuk menampilkan informasi yang fokus pada teks, dengan gambar sebagai elemen pendukung.
  • Hemat ruang secara vertikal, sehingga dapat memuat banyak data dalam satu layar.
  • Ideal untuk daftar yang memerlukan navigasi sederhana, seperti membuka halaman detail.

Frame 427320080

Perbedaan dengan Card

  • List: Lebih cocok untuk data berbasis teks. Gambar hanya sebagai pelengkap.
  • Card: Lebih cocok jika gambar atau visual menjadi fokus utama, karena memiliki ruang lebih besar untuk elemen visual.

Hindari menggunakan List jika:

  • Data yang ditampilkan mengutamakan elemen visual seperti gambar.
  • Informasi membutuhkan tampilan yang lebih interaktif atau mencolok, di mana Card bisa menjadi pilihan yang lebih tepat.

Panduan penulisan

list

Sesuaikan judul dengan isi data

Pastikan kata yang dipakai sesuai dengan konteks yang menjelaskan data yang dimaksud.

Singkat

Maksimal 2-3 kata dan fokus pada penjelasan data yang ditampilkan.

Gunakan sentence case

Untuk isi data menggunakan hanya huruf di awal kalimat yang ditulis kapital, serta hindari tanda titik “.” di akhir kalimat.

Dipublikasikan pada 1 Desember 2024. Terakhir diperbarui pada 2 Desember 2024.