इस पेज का अनुवाद Cloud Translation API से किया गया है.

चिप

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

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

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

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

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

SuggestionChip को लागू करने के बारे में सोचें:

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

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

एलिवेटेड चिप

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

अन्य संसाधन

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