Chip

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.