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.
Fokus & Navigasi: Dalam antarmuka yang mengandalkan navigasi terarah, daftar harus menunjukkan item yang menjadi fokus 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 stack, daftar mengisi penampung tampilan aplikasi.
Menggunakan scrim untuk menunjukkan konten yang meluap Jika daftar berisi lebih banyak item daripada yang akan muat dalam tampilan, scrim hitam akan digunakan di dekat batas daftar.
Daftar dapat menggunakan judul jika diperlukan Judul statis atau tetap dapat digunakan dalam daftar untuk memperjelas.
Larangan
Menggunakan kedalaman untuk menunjukkan fokus
Item daftar bergerak antara kedalaman 0 dan +4 untuk status tidak fokus dan fokus.
Item daftar dapat ditindaklanjuti
Item dalam daftar dapat bertindak sebagai tindakan. Pertahankan tindakan ke item daftar
Menyoroti kontrol yang akan diaktifkan saat diketuk, meskipun Anda dapat men-scroll sesuatu yang lain. Jika daftar atau kartu dapat di-scroll di belakang elemen lain, hanya fokuskan item yang merespons ketukan.
Anjuran
Larangan
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
List
Item: Setiap elemen individual dalam daftar.
A. Bentuk
B. Border
C. Ikon utama
D. Konten teks
E. Indikator trailing
Penyesuaian
Sebagian besar penyesuaian dilakukan 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 |