Daftar
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Daftar adalah representasi visual dari satu atau beberapa item terkait.
Menu ini biasanya digunakan untuk menampilkan kumpulan opsi.
Referensi
Sorotan
- Daftar adalah kumpulan teks atau gambar yang berkelanjutan.
- Daftar harus terasa alami dan dapat dipindai.
- Daftar terdiri dari item yang berisi tindakan utama dan tambahan
yang diwakili oleh ikon dan teks.
Varian
Ada tiga jenis daftar: daftar satu baris, daftar dua baris, dan
daftar tiga baris.
- Daftar satu baris: Satu baris untuk menyampaikan setiap item. Desain sederhana
ini memastikan setiap item berbeda dengan yang lain.
- Daftar dua baris: Menggunakan dua baris paralel untuk menyampaikan setiap item.
Desain terstruktur ini memastikan keterbacaan yang alami dan menghindari kelebihan beban
kognitif.
- Daftar tiga baris: Menggunakan tiga garis paralel untuk mewakili setiap item.
Desain dekoratif ini menciptakan tingkat keterlihatan visual yang tinggi.
Anatomi
- Ikon: Gambar kecil yang mewakili objek atau tindakan tertentu, sering
digunakan untuk menyampaikan ide atau konsep secara visual.
- Overline: Baris teks pendek yang muncul di atas judul atau subtitel,
sering digunakan untuk memberikan konteks atau penekanan tambahan.
- Judul: Baris teks besar dan tebal yang berfungsi sebagai judul utama
elemen atau halaman desain.
- Subtitel: Baris teks yang lebih kecil yang memberikan informasi atau konteks tambahan di bawah judul utama.
- Kontrol: Elemen interaktif yang memungkinkan pengguna memasukkan keputusan.
Status
Spesifikasi
Penggunaan
Daftar adalah kelompok teks dan gambar yang diatur secara vertikal.
Dioptimalkan untuk pemahaman membaca, daftar terdiri dari satu
kolom item yang berkelanjutan.
Item daftar dapat berisi tindakan utama dan tambahan yang direpresentasikan
oleh ikon dan teks.
check_circle
Anjuran
Item daftar bukan tombol. Item tidak memiliki penampung. Secara default, item daftar tidak dipilih dan tidak difokuskan.
warning
Perhatian
Gunakan latar belakang penampung untuk item daftar hanya jika diperlukan.
Kontrol pilihan
Kontrol menampilkan informasi dan tindakan untuk item daftar. Ikon dapat disejajarkan
ke tepi awal atau akhir item daftar.
- Kotak centang: Pilih satu atau beberapa item daftar.
- Tombol pilihan: Pilih tepat satu
item dalam daftar.
- Tombol: Mengaktifkan atau menonaktifkan kontrol.
check_circle
Anjuran
Gunakan indikator pemilihan ikon untuk menampilkan item yang dipilih dengan jelas dalam daftar. Hal ini akan membantu pengguna mengidentifikasi item yang telah mereka pilih dengan mudah dan meningkatkan pengalaman pengguna secara keseluruhan.
cancel
Larangan
Hindari hanya mengandalkan warna latar belakang untuk menunjukkan pilihan dalam daftar.
cancel
Larangan
Hindari menempatkan tombol di dalam item daftar karena dapat menyebabkan kebingungan tentang elemen mana yang saat ini menjadi fokus.
Ikon
check_circle
Anjuran
Jika Anda menampilkan jenis konten yang sama dalam daftar, hapus ikon untuk mengurangi derau visual dan meningkatkan pengalaman pengguna. Hindari penggunaan ikon dalam daftar jika ikon tersebut tidak memiliki tujuan dan tidak memberikan informasi tambahan.
cancel
Larangan
Hindari penggunaan ikon yang sama untuk semua item dalam daftar. Hal ini dapat membingungkan dan berlebihan secara visual bagi pengguna. Sebagai gantinya, gunakan ikon hanya jika ikon tersebut memberikan nilai atau informasi tambahan.
Avatar dan gambar
Item daftar dapat menyertakan gambar dalam pemangkasan melingkar untuk mewakili
orang atau entitas.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[null,null,["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Lists are a visual representation of one or more related items.\nThey are commonly used to display a collection of options.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#ListItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.ListItemShape,androidx.tv.material3.ListItemColors,androidx.tv.material3.ListItemScale,androidx.tv.material3.ListItemBorder,androidx.tv.material3.ListItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource)) | Available |\n\nHighlights\n----------\n\n- Lists are a continuous collection of text or images.\n- Lists should feel natural and be scannable.\n- Lists are made up of items containing primary and supplemental actions represented by icons and text.\n\nVariants\n--------\n\nThere are three types of lists: one-line list, two-line list, and\nthree-line list.\n\n1. **One-line list**: A single line to communicate each item. This simple design ensures each item is clearly distinct from the other.\n2. **Two-line list**: Uses two parallel lines to communicate each item. This structured design ensures natural readability and avoids cognitive overload.\n3. **Three-line list**: Uses three parallel lines to represent each item. This decorative design creates a high level of visual prominence.\n\nAnatomy\n-------\n\n1. **Icon**: A small graphic that represents a specific object or action, often used to visually communicate an idea or concept.\n2. **Overline**: A short line of text that appears above title or subtitle, often used to provide additional context or emphasis.\n3. **Title**: A large, bold line of text that serves as the main heading of a design element or page.\n4. **Subtitle**: A smaller line of text that provides additional information or context below a main title.\n5. **Control**: An interactive element that allows the user to input a decision.\n\nStates\n------\n\nSpec\n----\n\nUsage\n-----\n\nLists are vertically organized groups of text and images.\nOptimized for reading comprehension, a list consists of a single\ncontinuous column of items.\nList items can contain primary and supplemental actions represented\nby icons and text. \ncheck_circle\n\n### Do\n\nList items are not buttons. The items don't have containers. List items are, by default, unselected and unfocused. \nwarning\n\n### Caution\n\nUse container background for list items only when necessary.\n\n### Selection controls\n\nControls display information and actions for list items. They can be aligned\nto the leading or trailing edge of the list item.\n\n\n\u003cbr /\u003e\n\n1. **Checkboxes**: Select one or more list items.\n2. **Radio buttons**: Select exactly one item in the list.\n3. **Switches**: Toggle a control on or off.\n\ncheck_circle\n\n### Do\n\nUse an icon selection indicator to clearly show the selected item in a list. This will help users easily identify which item they have selected and improve the overall user experience. \ncancel\n\n### Don't\n\nAvoid relying solely on the background color to indicate selection in a list. \ncancel\n\n### Don't\n\nAvoid placing buttons inside a list item as it can cause confusion about which element is currently in focus.\n\n### Icons\n\ncheck_circle\n\n### Do\n\nIf you're showing the same type of content in the list, omit icons to reduce visual noise and improve the user experience. Avoid using icons in a list when they serve no purpose and don't provide additional information. \ncancel\n\n### Don't\n\nAvoid using the same icon for all items in a list. This can be visually overwhelming and confusing for users. Instead, use icons only when they add value or provide additional information.\n\n### Avatars and images\n\nList items can include images in a circular crop to represent a\nperson or entity."]]
