Chip

Komponen Chip adalah elemen UI yang ringkas dan interaktif. Model ini mewakili kompleksitas entitas seperti kontak atau tag, sering kali dengan ikon dan label. Bisa dapat dicentang, ditutup, atau diklik.

Empat jenis chip dan tempat Anda dapat menggunakannya adalah sebagai berikut:

  • Membantu: Memandu pengguna selama tugas. Sering kali muncul sebagai UI sementara sebagai respons terhadap input pengguna.
  • Filter: Memungkinkan pengguna menyaring konten dari serangkaian opsi. Mereka dapat dipilih atau dibatalkan pilihannya, dan dapat menyertakan ikon tanda centang saat dipilih.
  • Input: Mewakili informasi yang disediakan pengguna, seperti pilihan di Google Spreadsheet. Aset dapat berisi ikon dan teks, serta memberikan 'X' untuk dihapus.
  • Saran: Memberikan rekomendasi kepada pengguna berdasarkan aktivitas atau input terbaru mereka. Biasanya muncul di bawah kolom input untuk meminta tindakan pengguna.
Contoh masing-masing dari empat komponen chip, dengan karakteristik uniknya ditandai.
Gambar 1. Keempat komponen chip.

Platform API

Ada empat composable yang sesuai dengan empat jenis chip. Bagian berikut menguraikan composable ini dan perbedaannya secara mendetail. Namun, keduanya berbagi parameter berikut:

  • label: String yang muncul di chip.
  • icon: Ikon yang ditampilkan di awal chip. Beberapa composable tertentu memiliki parameter leadingIcon dan trailingIcon terpisah.
  • onClick: Lambda yang dipanggil chip saat pengguna menekannya.

Chip panduan

Composable AssistChip menyediakan cara mudah untuk membuat chip bantuan yang mendorong pengguna ke arah tertentu. Salah satu fitur yang membedakan adalah parameter leadingIcon yang memungkinkan Anda menampilkan ikon di sisi kiri chip. Contoh berikut menunjukkan cara menerapkannya:

@Composable
fun AssistChipExample() {
    AssistChip(
        onClick = { Log.d("Assist chip", "hello world") },
        label = { Text("Assist chip") },
        leadingIcon = {
            Icon(
                Icons.Filled.Settings,
                contentDescription = "Localized description",
                Modifier.size(AssistChipDefaults.IconSize)
            )
        }
    )
}
Chip.kt

Implementasi ini akan terlihat seperti berikut.

Chip bantuan sederhana.
Gambar 2. Chip bantuan.

Filter chip

Composable FilterChip mengharuskan Anda melacak apakah chip dipilih. Contoh berikut menunjukkan cara menampilkan ikon centang utama hanya saat pengguna memilih chip:

@Composable
fun FilterChipExample() {
    var selected by remember { mutableStateOf(false) }

    FilterChip(
        onClick = { selected = !selected },
        label = {
            Text("Filter chip")
        },
        selected = selected,
        leadingIcon = if (selected) {
            {
                Icon(
                    imageVector = Icons.Filled.Done,
                    contentDescription = "Done icon",
                    modifier = Modifier.size(FilterChipDefaults.IconSize)
                )
            }
        } else {
            null
        },
    )
}
Chip.kt

Implementasi ini akan muncul sebagai berikut jika tidak dipilih:

Chip filter yang tidak dipilih, tanpa pemeriksaan dan latar belakang rencana.
Gambar 3. Chip filter tidak dipilih.

Dan muncul seperti berikut saat dipilih:

Chip filter yang dipilih, dengan tanda centang dan latar belakang berwarna.
Gambar 4. Chip filter yang dipilih.

Chip input

Anda dapat menggunakan composable InputChip untuk membuat chip yang dihasilkan dari interaksi pengguna. Misalnya, di klien email, saat pengguna menulis email, chip input mungkin mewakili orang yang alamatnya telah dimasukkan pengguna ke kolom "ke:".

Implementasi berikut menunjukkan chip input yang sudah dalam status yang dipilih. Pengguna menutup chip saat menekannya.

@Composable
fun InputChipExample(
    text: String,
    onDismiss: () -> Unit,
) {
    var enabled by remember { mutableStateOf(true) }
    if (!enabled) return

    InputChip(
        onClick = {
            onDismiss()
            enabled = !enabled
        },
        label = { Text(text) },
        selected = enabled,
        avatar = {
            Icon(
                Icons.Filled.Person,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                Icons.Default.Close,
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}
Chip.kt

Implementasi ini muncul sebagai berikut.

Chip input dengan avatar dan ikon di akhir.
Gambar 5. Masukkan chip.

Chip saran

Composable SuggestionChip adalah composable paling dasar yang tercantum di halaman ini, baik dalam definisi API-nya maupun kasus penggunaan umumnya. Saran chip menyajikan petunjuk yang dihasilkan secara dinamis. Misalnya, di aplikasi chat AI, Anda dapat menggunakan chip saran untuk menampilkan kemungkinan respons terhadap pesan terbaru.

Pertimbangkan penerapan SuggestionChip ini:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}
Chip.kt

Implementasi ini muncul sebagai berikut:

Chip bantuan sederhana.
Gambar 6. Chip bantuan.

Chip yang dinaikkan

Semua contoh dalam dokumen ini menggunakan composable dasar yang menggunakan elemen datar tampilan. Jika Anda menginginkan chip dengan tampilan yang ditingkatkan, gunakan salah satu tiga composable berikut:

Referensi lainnya