Komponen Chip
adalah elemen ringkas interaktif yang
merepresentasikan input, atribut, atau tindakan.
Anatomi
Chip dapat berisi hingga dua label teks dan ikon opsional. Minimal
satu label teks atau ikon harus disediakan. Chip dapat memotong teks jika
label teks terlalu panjang. Label utama berupa satu baris teks jika
label sekunder ada, tetapi maksimal dua baris teks jika
label sekunder tidak ada.
A. Label utama
B. Label sekunder (opsional)
C. Ikon (opsional)
D. Penampung
Rekomendasi desain
Chip gambar
Chip gambar berisi tindakan yang berkaitan dengan gambar yang dipilih. Chip gambar
berfungsi dengan baik untuk mengomunikasikan tampilan dan nuansa yang lebih spesifik.
Chip(
...
label = {
Text(
text = "Summer Mix",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
colors = ChipDefaults.imageBackgroundChipColors(
backgroundImagePainter = painterResource(id = R.drawable.clouds)
)
)
Chip Avatar
Gunakan chip avatar untuk tindakan yang terkait dengan avatar yang dipilih. Chip
avatar juga dapat memiliki ikon yang digunakan agar avatar lebih mudah dikenali,
seperti foto ID kontak. Ikon avatar berukuran 32x32dp.
Chip(
...
label = {
Text(text = "Mark Castle")
},
icon = {
Icon(
painter = painterResource(id = R.drawable.avatar),
contentDescription = null,
modifier = Modifier.size(ChipDefaults.LargeIconSize)
.wrapContentSize(align = Alignment.Center)
)
}
)
Chip ringkas
Komponen terkait,
CompactChip adalah varian komponen Chip yang tampak lebih kecil
dan didesain untuk kasus penggunaan dengan ruang yang lebih kecil. Chip ringkas
memiliki slot untuk ikon dan slot untuk label teks baris tunggal. Chip
ringkas memiliki area ketuk dengan tinggi 48dp.
Hierarki
Gunakan isi warna yang berbeda untuk menunjukkan hierarki chip. Desain setiap layar agar
berisi satu chip yang menonjol untuk tindakan utama.
Penekanan tinggi
Gunakan chip yang menekankan tinggi untuk tindakan utama di halaman. Gunakan warna
utama sebagai isi chip penekanan tinggi.
Penekanan sedang
Gunakan chip penekanan sedang untuk tindakan yang kurang penting dibandingkan tindakan
utama. Gunakan warna sekunder untuk isi chip penekanan sedang.
Atau, gunakan komponen
OutlinedChip
kustom. Chip bergaris tepi memiliki latar belakang transparan, goresan warna
varian utama opasitas 60%, dan konten berwarna utama.
Penekanan rendah
Chip penekanan rendah memiliki isi transparan dan hanya label teks. Gunakan chip
penekanan rendah untuk menunjukkan hubungan turunan ke chip utama atau
sekunder.
Ukuran
Chip default
Ikon: 24dp
Tinggi: 52dp
Chip Ringkas
Ikon: 20 dp
Tinggi: 32dp
Area ketuk: 48dp
Penggunaan
Lihat contoh penggunaan chip seperti chip standar di Setelan dan chip gambar
di aplikasi olahraga.