Komponen Chip
adalah elemen UI yang ringkas dan interaktif. Fungsi ini mewakili entity
yang kompleks seperti kontak atau tag, sering kali dengan ikon dan label. Elemen ini dapat
dicentang, ditutup, atau dapat diklik.
Keempat jenis chip dan tempat Anda dapat menggunakannya adalah sebagai berikut:
- Bantuan: Memandu pengguna selama melakukan tugas. Sering kali muncul sebagai elemen UI sementara sebagai respons terhadap input pengguna.
- Filter: Memungkinkan pengguna menyaring konten dari serangkaian opsi. Aplikasi dapat dipilih atau dibatalkan pilihannya, dan dapat menyertakan ikon tanda centang saat dipilih.
- Input: Mewakili informasi yang disediakan pengguna, seperti pilihan pada menu. Halaman tersebut dapat berisi ikon dan teks, serta memberikan tanda 'X' untuk dihapus.
- Saran: Memberikan rekomendasi kepada pengguna berdasarkan aktivitas atau input terbaru mereka. Biasanya muncul di bawah kolom input untuk meminta tindakan pengguna.
Platform API
Ada empat composable yang sesuai dengan empat jenis chip. Bagian berikut menguraikan composable ini dan perbedaannya secara mendetail. Namun, keduanya menggunakan parameter berikut:
label
: String yang muncul di chip.icon
: Ikon yang ditampilkan di awal chip. Beberapa composable tertentu memiliki parameterleadingIcon
dantrailingIcon
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 membedakannya 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) ) } ) }
Implementasi ini akan muncul sebagai berikut.
Filter chip
Composable FilterChip
mengharuskan Anda melacak apakah chip
dipilih atau tidak. Contoh berikut menunjukkan cara menampilkan ikon yang 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 }, ) }
Implementasi ini akan muncul sebagai berikut jika tidak dipilih:
Dan akan muncul seperti berikut jika dipilih:
Chip input
Anda dapat menggunakan composable InputChip
untuk membuat chip yang dihasilkan dari
interaksi pengguna. Misalnya, di program email, saat pengguna menulis email, chip input mungkin mewakili orang yang alamatnya telah dimasukkan pengguna ke kolom "to:".
Implementasi berikut menunjukkan chip input yang sudah berada 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 akan muncul sebagai berikut.
Chip saran
Composable SuggestionChip
adalah composable paling dasar yang tercantum
di halaman ini, baik dalam definisi API maupun kasus penggunaan umumnya. Chip saran
menyajikan petunjuk yang dihasilkan secara dinamis. Misalnya, dalam 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") } ) }
Implementasi ini akan muncul sebagai berikut:
Chip yang ditinggikan
Semua contoh dalam dokumen ini menggunakan composable dasar yang menampilkan tampilan datar. Jika Anda menginginkan chip yang memiliki tampilan yang ditingkatkan, gunakan salah satu dari tiga composable berikut: