Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

चिप

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(
                painter = rememberVectorPainter(AppIcons.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(
                    painter = rememberVectorPainter(AppIcons.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(
                painter = rememberVectorPainter(AppIcons.Person),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
        trailingIcon = {
            Icon(
                painter = rememberVectorPainter(AppIcons.Close),
                contentDescription = "Localized description",
                Modifier.size(InputChipDefaults.AvatarSize)
            )
        },
    )
}Chip.kt

लागू होने पर यह इस तरह दिखता है.

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

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

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

SuggestionChip को लागू करने का यह तरीका देखें:

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

लागू होने पर यह इस तरह दिखता है:

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

एलिवेटेड चिप

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

अन्य संसाधन

Material UI के दस्तावेज़