चिप

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

चार तरह के चिप और उन्हें इस्तेमाल करने के तरीके यहां दिए गए हैं:

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

एपीआई प्लैटफ़ॉर्म

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

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

असिस्ट चिप

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

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

एक आसान असिस्ट चिप.
छठी इमेज. असिस्ट चिप.

उभरा हुआ चिप

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

अन्य संसाधन