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.

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

  • Bantuan: Memandu pengguna selama melakukan tugas. Sering kali muncul sebagai UI sementara sebagai respons terhadap input pengguna.
  • Filter: Memungkinkan pengguna menyaring konten dari sekumpulan opsi. Mereka dapat dipilih atau tidak dipilih, 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 rekomendasi aktivitas atau input Anda. Biasanya muncul di bawah kolom input untuk meminta izin pengguna tindakan.
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. Tujuan 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 leadingIcon dan trailingIcon yang terpisah .
  • onClick: Lambda yang dipanggil chip saat pengguna menekannya.

Chip panduan

Composable AssistChip memberikan cara mudah untuk membuat {i>help <i}yang mendorong pengguna ke arah tertentu. Satu hal yang membedakan fitur adalah parameter leadingIcon yang memungkinkan Anda menampilkan ikon di sebelah kiri sisi 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 muncul sebagai berikut.

Chip bantuan sederhana.
Gambar 2. Chip bantuan.

Filter chip

Composable FilterChip mengharuskan Anda melacak apakah chip dipilih. Contoh berikut menunjukkan cara menampilkan ikon dicentang hanya jika pengguna telah 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

Penerapan ini akan muncul seperti berikut jika tidak dipilih:

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

Dan muncul seperti berikut saat dipilih:

Chip filter yang dipilih, dengan 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 program email, saat pengguna menulis email, {i>input chip<i} dapat mewakili orang yang alamatnya telah dimasukkan oleh pengguna menjadi "to:" kolom tersebut.

Implementasi berikut menunjukkan chip input yang sudah ada 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. Chip input.

Chip saran

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

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