चिप

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

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

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

फ़िल्टर चिप

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

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

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

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

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

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

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

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

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

एलिवेटेड चिप

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

अन्य संसाधन

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