Bu sayfa, Cloud Translation API ile çevrilmiştir.

Çip

Chip bileşeni, küçük ve etkileşimli bir kullanıcı arayüzü öğesidir. Genellikle simge ve etiketle birlikte kişi veya etiket gibi karmaşık öğeleri temsil eder. Bu düğmeler işaretlenebilir, kapatılabilir veya tıklanabilir olabilir.

Dört çip türü ve bunları kullanabileceğiniz yerler aşağıda açıklanmıştır:

Destek: Kullanıcıyı görev sırasında yönlendirir. Genellikle kullanıcı girişine yanıt olarak geçici bir kullanıcı arayüzü öğesi olarak görünür.
Filtre: Kullanıcıların bir dizi seçenek arasından içerikleri hassaslaştırmalarına olanak tanır. Bu öğeler seçilebilir veya seçimi kaldırılabilir. Seçildiğinde onay işareti simgesi içerebilir.
Giriş: Kullanıcı tarafından sağlanan bilgileri (ör. menüdeki seçimler) temsil eder. Simge ve metin içerebilir ve kaldırmak için bir "X" sunabilir.
Öneri: Kullanıcıya son etkinliğine veya girdisine göre öneriler sunar. Genellikle kullanıcı işlemlerini istemek için bir giriş alanının altında görünür.

Dört çip bileşeninin her birinin benzersiz özelliklerinin vurgulandığı bir örnek. — **Şekil 1.** Dört çip bileşeni.

API yüzeyi

Dört çip türüne karşılık gelen dört bileşen vardır. Aşağıdaki bölümlerde, bu composable'lar ve farklılıkları ayrıntılı olarak açıklanmaktadır. Ancak aşağıdaki parametreleri paylaşırlar:

label: Çipte görünen dize.
icon: Çipin başında gösterilen simge. Belirli composable'lardan bazılarında ayrı bir leadingIcon ve trailingIcon parametresi bulunur.
onClick: Kullanıcı çipe bastığında çipin çağırdığı lambda.

Yardım çipi

AssistChip bileşeni, kullanıcıyı belirli bir yöne yönlendiren bir yardım çipi oluşturmanın basit bir yolunu sunar. Bu öğenin ayırt edici özelliklerinden biri, çipin sol tarafında bir simge görüntülemenize olanak tanıyan leadingIcon parametresidir. Aşağıdaki örnekte bu özelliği nasıl uygulayabileceğiniz gösterilmektedir:

@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)
            )
        }
    )
}Chip.kt

Bu uygulama aşağıdaki gibi görünür.

Basit bir yardımcı çip. — **Şekil 2.** Yardım çipi.

Filtre çipi

FilterChip bileşeni, çipin seçilip seçilmediğini izlemenizi gerektirir. Aşağıdaki örnekte, yalnızca kullanıcı çipi seçtiğinde önceden işaretlenmiş bir simgeyi nasıl gösterebileceğiniz gösterilmektedir:

@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
        },
    )
}Chip.kt

Bu uygulama, seçilmediğinde aşağıdaki gibi görünür:

İşaretli olmayan ve plan arka planına sahip, seçilmemiş bir filtre çipi. — **Şekil 3.** Seçilmemiş filtre çipi.

Seçildiğinde aşağıdaki gibi görünür:

İşaret ve renkli arka plan içeren seçili filtre çipi. — **Şekil 4.** Seçilen filtre çipi.

Giriş çipi

Kullanıcı etkileşiminden kaynaklanan çipler oluşturmak için InputChip bileşenini kullanabilirsiniz. Örneğin, bir e-posta istemcisinde kullanıcı e-posta yazarken giriş çipi, kullanıcının "kime:" alanına adresini girdiği bir kişiyi temsil edebilir.

Aşağıdaki uygulamada, halihazırda seçili durumda olan bir giriş çipi gösterilmektedir. Kullanıcı, çipe bastığında çipi kapatır.

@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)
            )
        },
    )
}Chip.kt

Bu uygulama aşağıdaki gibi görünür.

Şekil 5. Çipi girin.

Öneri çipi

SuggestionChip bileşeni, hem API tanımı hem de yaygın kullanım alanları açısından bu sayfada listelenen bileşenler arasında en temel olanıdır. Öneri çipleri, dinamik olarak oluşturulan ipuçlarını sunar. Örneğin, bir AI sohbet uygulamasında en son mesaja verilebilecek yanıtları sunmak için öneri çiplerini kullanabilirsiniz.

SuggestionChip için aşağıdaki uygulamayı düşünün:

@Composable
fun SuggestionChipExample() {
    SuggestionChip(
        onClick = { Log.d("Suggestion chip", "hello world") },
        label = { Text("Suggestion chip") }
    )
}Chip.kt

Bu uygulama aşağıdaki gibi görünür:

Yükseltilmiş çip

Bu dokümandaki tüm örneklerde, düz bir görünüme sahip temel bileşenler kullanılmaktadır. Gelişmiş bir görünüme sahip bir çip istiyorsanız aşağıdaki üç bileşenden birini kullanın:

Ek kaynaklar

Material UI belgeleri