Daftar adalah penampung elemen dengan scroll dan fokus bawaan.
Prinsip
Organisasi yang Jelas: Daftar harus menyajikan informasi dalam susunan vertikal yang jelas dan mudah dipindai.
Presentasi Item yang Konsisten: Item daftar harus mengikuti struktur visual yang konsisten.
Kemampuan Fokus & Navigasi: Dalam antarmuka yang mengandalkan navigasi terarah, daftar harus menunjukkan item yang saat ini difokuskan dengan jelas.
Interaktivitas: Item daftar sering kali mewakili elemen yang dapat dipilih atau dapat ditindaklanjuti.
Penggunaan & Penempatan
Daftar dapat berisi berbagai konten selevel dengan elemen yang dapat diulang. Tidak seperti tumpukan, daftar mengisi penampung tampilan aplikasi.
Daftar dapat menampilkan satu atau beberapa item yang dapat dipilih dalam tampilan.
Menggunakan scrim untuk menunjukkan konten yang meluap
Jika daftar berisi lebih banyak item daripada yang dapat dimuat dalam tampilan, scrim hitam akan digunakan di dekat batas daftar.
Daftar dapat menggunakan judul jika diperlukan
Judul statis atau tetap dapat digunakan dalam daftar agar lebih jelas.
Larangan
Menggunakan kedalaman untuk menunjukkan fokus
Item daftar berpindah antara kedalaman 0 dan +4 untuk status tidak fokus dan fokus.
Item daftar dapat ditindaklanjuti
Item dalam daftar dapat bertindak sebagai tindakan. Menyimpan tindakan ke item daftar
Anatomi
Daftar terdiri dari penampung scroll dan item daftar dengan jarak yang konsisten. Daftar harus di-scroll secara vertikal, dengan overshoot minimal, saat jumlah item melebihi area tampilan.
A. Penampung - area yang dapat di-scroll
B. Item daftar
C. Kolom sistem
Item Daftar: Setiap elemen individual dalam daftar.
A. Bentuk
B. Batas
C. Ikon utama
D. Konten teks
E. Indikator trailing
Penyesuaian
Sebagian besar penyesuaian terjadi dengan item daftar.
| Properti | Penyesuaian | Default |
|---|---|---|
| Item daftar: Bentuk | Ya | 40 dp |
| Item daftar: Ikon Awal dan Akhir | Ya | Ikon Simbol Sedang |
| Item daftar: Nilai padding | Ya | 2d dp, 20 dp |
| Item daftar: Konten | Ya | Satu baris: Satu composable Teks untuk label utama menggunakan Body Small Dua baris: Kolom yang berisi dua composable Teks untuk label utama dan sekunder Utama: Title Small Sekunder: Body Small |
| Daftar: verticalArrangement | Ya | 20 dp |