Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

चिप

Chip कॉम्पोनेंट, एक कॉम्पैक्ट और इंटरैक्टिव यूज़र इंटरफ़ेस (यूआई) एलिमेंट है. यह संपर्क या टैग जैसी जटिल इकाइयों को दिखाता है. इसमें अक्सर कोई आइकॉन और लेबल शामिल होता है. इसे चेक किया जा सकता है, बंद किया जा सकता है या इस पर क्लिक किया जा सकता है.

यहां चार तरह के चिप दिए गए हैं. साथ ही, यह भी बताया गया है कि इनका इस्तेमाल कहां किया जा सकता है:

सहायक चिप: किसी टास्क के दौरान, उपयोगकर्ता को गाइड करती है. यह अक्सर उपयोगकर्ता के इनपुट के जवाब में, अस्थायी यूज़र इंटरफ़ेस (यूआई) एलिमेंट के तौर पर दिखती है.
फ़िल्टर चिप: उपयोगकर्ताओं को विकल्पों के सेट से कॉन्टेंट को बेहतर बनाने की सुविधा देती है. इन्हें चुना या हटाया जा सकता है. साथ ही, चुने जाने पर इनमें सही का निशान दिखाने वाला आइकॉन शामिल हो सकता है.
इनपुट चिप: उपयोगकर्ता की दी गई जानकारी को दिखाती है. जैसे, मेन्यू में चुने गए विकल्प. इनमें कोई आइकॉन और टेक्स्ट शामिल हो सकता है. साथ ही, इन्हें हटाने के लिए X का विकल्प दिया जा सकता है.
सुझाव वाली चिप: उपयोगकर्ता की हाल ही की गतिविधि या इनपुट के आधार पर, उन्हें सुझाव देती है. ये आम तौर पर, उपयोगकर्ता से कार्रवाई कराने के लिए, इनपुट फ़ील्ड के नीचे दिखती हैं.

चारों चिप कॉम्पोनेंट का उदाहरण. इनमें उनकी खास बातों को हाइलाइट किया गया है. — **पहली इमेज.** चार तरह के चिप कॉम्पोनेंट.

एपीआई सरफ़ेस

चार तरह के चिप के लिए, चार कंपोज़ेबल उपलब्ध हैं. इन सेक्शन में, इन कंपोज़ेबल और उनके अंतर के बारे में ज़्यादा जानकारी दी गई है. हालांकि, इनमें ये पैरामीटर शामिल होते हैं:

label: चिप पर दिखने वाली स्ट्रिंग.
icon: चिप की शुरुआत में दिखने वाला आइकॉन. कुछ खास कंपोज़ेबल में, leadingIcon और trailingIcon के लिए अलग-अलग पैरामीटर होते हैं.
onClick: लैम्डा, जिसे उपयोगकर्ता के चिप दबाने पर कॉल किया जाता है.

सहायक चिप

AssistChip कंपोज़ेबल की मदद से, सहायक चिप को आसानी से बनाया जा सकता है. यह चिप, उपयोगकर्ता को किसी खास दिशा में ले जाती है. इसकी एक खास सुविधा, leadingIcon पैरामीटर है. इसकी मदद से, चिप के बाईं ओर कोई आइकॉन दिखाया जा सकता है. यहां दिए गए उदाहरण में, इसे लागू करने का तरीका बताया गया है:

@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

यह इस तरह दिखती है.

एक सामान्य असिस्ट चिप, जिसमें लीडिंग आइकॉन और टेक्स्ट लेबल दिख रहा है. — **दूसरी इमेज.** सहायक चिप.

फ़िल्टर चिप

FilterChip कंपोज़ेबल के लिए, यह ट्रैक करना ज़रूरी है कि चिप चुनी गई है या नहीं. यहां दिए गए उदाहरण में, यह दिखाया गया है कि उपयोगकर्ता के चिप चुनने पर ही, सही का निशान दिखाने वाला आइकॉन कैसे दिखाया जा सकता है:

@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

चिप न चुने जाने पर, यह इस तरह दिखती है:

यह एक ऐसे फ़िल्टर चिप की इमेज है जिसे नहीं चुना गया है. इसमें कोई चेक मार्क नहीं है और इसका बैकग्राउंड सादा है. — **तीसरी इमेज.** चुनी नहीं गई फ़िल्टर चिप.

चिप चुने जाने पर, यह इस तरह दिखती है:

चुने गए फ़िल्टर चिप पर सही का निशान और रंगीन बैकग्राउंड दिखता है. — **चौथी इमेज.** चुनी गई फ़िल्टर चिप.

इनपुट चिप

InputChip कंपोज़ेबल का इस्तेमाल करके, ऐसी चिप बनाई जा सकती हैं जो उपयोगकर्ता के इंटरैक्शन से बनती हैं. उदाहरण के लिए, ईमेल क्लाइंट में, जब उपयोगकर्ता कोई ईमेल लिख रहा होता है, तो इनपुट चिप, उस संपर्क को दिखा सकती है जिसे उपयोगकर्ता ने "इनको:" फ़ील्ड में जोड़ा है.

यहां दिए गए उदाहरण में, ऐसी इनपुट चिप दिखाई गई है जो पहले से ही चुनी गई है. उपयोगकर्ता के चिप दबाने पर, वह हट जाती है.

@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

यह इस तरह दिखती है.

अवतार और ट्रेलिंग आइकॉन वाला इनपुट चिप. — **पांचवी इमेज.** इनपुट चिप.

सुझाव वाली चिप

The SuggestionChip कंपोज़ेबल, इस पेज पर दी गई कंपोज़ेबल में सबसे बुनियादी है. यह बात, इसके एपीआई की परिभाषा और इसके सामान्य इस्तेमाल के उदाहरण, दोनों पर लागू होती है. सुझाव वाली चिप, डाइनैमिक तरीके से जनरेट किए गए हिंट दिखाती है. उदाहरण के लिए, एआई चैट ऐप्लिकेशन में, सुझाव वाली चिप का इस्तेमाल करके, हाल ही के मैसेज के संभावित जवाब दिखाए जा सकते हैं.

SuggestionChip के इस उदाहरण पर ध्यान दें:

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

यह इस तरह दिखती है:

सुझाव वाला एक आसान चिप. — **छठी इमेज.** सुझाव वाली चिप.

उभरी हुई चिप

इस दस्तावेज़ में दिए गए सभी उदाहरणों में, बुनियादी कंपोज़ेबल का इस्तेमाल किया गया है. ये कंपोज़ेबल, फ़्लैट दिखते हैं. अगर आपको ऐसी चिप चाहिए जो उभरी हुई दिखे, तो इन तीन कंपोज़ेबल में से किसी एक का इस्तेमाल करें:

अन्य संसाधन

Material यूज़र इंटरफ़ेस (यूआई) के दस्तावेज़