Çipler

Chip bileşeni giriş, özellik veya işlemi temsil eden etkileşimli kompakt bir öğedir.

Anatomi

Çiplerde en fazla iki metin etiketi ve isteğe bağlı bir simge bulunabilir. En az bir metin etiketi veya simge sağlanmalıdır. Metin etiketi çok uzunsa çipler metni kısaltabilir. Birincil etiket, ikincil etiket varsa bir satırlık, ikincil etiket yoksa en fazla iki satırlık metinden oluşur.

A. Birincil etiket
B. İkincil etiket (isteğe bağlı)
C. Simge (isteğe bağlı)
D. Kapsayıcı

Tasarım önerileri

Resim çipi

Resim çipleri, seçilen resimle ilgili işlemler içerir. Resim çipleri, daha net bir görünüm ve tarz sunmak için idealdir.

Chip(
    ...
    label = {
        Text(
            text = "Summer Mix",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)
Avatar çipi

Seçilen avatarla ilgili işlemler için avatar çiplerini kullanın. Avatar çiplerinde, avatarı daha kolay tanınabilmesi için kullanılan simgeler (ör. kişi kimliği fotoğrafı) da bulunabilir. Avatar simgeleri 32x32 dp'dir.

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)
        )
    }
)
Kompakt çip

İlgili bileşen olan CompactChip, Çip bileşeninin daha küçük görünen bir varyantıdır ve daha az alan olan kullanım alanları için tasarlanmıştır. Kompakt çiplerde, simge için bir yuva ve tek satırlı metin etiketi için bir yuva bulunur. Kompakt çipler, 48 dp yükseklikte dokunulabilir bir alana sahiptir.

Hiyerarşi

Çip hiyerarşisini belirtmek için farklı renk dolguları kullanın. Her ekranı, birincil işlem için tek bir belirgin çip içerecek şekilde tasarlayın.

Yüksek vurgu
Sayfa için birincil işlemler için yüksek vurgulu çipler kullanın. Birincil renkleri, vurgulu çipin dolgusu olarak kullanın.

Orta düzeyde vurgu
Birincil işlemlerden daha az önemli olan işlemler için orta düzeyde vurgulu çip kullanın. Orta düzeyde vurgulanmış çipin dolgusu için ikincil renkler kullanın.

Alternatif olarak, özel OutinlineChip bileşenini kullanabilirsiniz. Dış çizgili çipin şeffaf bir arka planı, birincil varyantı% 60 opaklığa sahip renkli çizgisi ve birincil renkli içeriği vardır.

Düşük vurgu
Düşük vurgulu çiplerde şeffaf bir dolgu ve yalnızca bir metin etiketi bulunur. Birincil veya ikincil çiple alt ilişkisi belirtmek için düşük vurgulu çipler kullanın.

Boyutlar

Varsayılan çip

Simge: 24 dp
Yükseklik: 52 dp

Kompakt Çip

Simge: 20 dp
Yükseklik: 32 dp
Dokunulabilir alan: 48 dp

Kullanım

Ayarlar'da standart çipler ve egzersiz uygulamasındaki resim çipleri gibi çip kullanım örneklerini inceleyin.