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.
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 memilikileadingIcon
dantrailingIcon
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) ) } ) }
Implementasi ini muncul sebagai berikut.
![Chip bantuan sederhana.](https://developer.android.com/static/develop/ui/compose/images/components/chip-assist.png?authuser=9&hl=id)
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 }, ) }
Penerapan ini akan muncul seperti berikut jika tidak dipilih:
![Chip filter yang batal dipilih, tanpa pemeriksaan dan latar belakang paket.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter.png?authuser=9&hl=id)
Dan muncul seperti berikut saat dipilih:
![Chip filter yang dipilih, dengan centang dan latar belakang berwarna.](https://developer.android.com/static/develop/ui/compose/images/components/chip-filter-active.png?authuser=9&hl=id)
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) ) }, ) }
Implementasi ini muncul sebagai berikut.
![Chip input dengan avatar dan ikon di akhir.](https://developer.android.com/static/develop/ui/compose/images/components/chip-input.png?authuser=9&hl=id)
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") } ) }
Implementasi ini muncul sebagai berikut:
![Chip bantuan sederhana.](https://developer.android.com/static/develop/ui/compose/images/components/chip-suggestion.png?authuser=9&hl=id)
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: