चिप

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

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

• Assist: किसी टास्क के दौरान उपयोगकर्ता को निर्देश देता है. यह अक्सर उपयोगकर्ता के इनपुट के जवाब में, यूज़र इंटरफ़ेस के एक अस्थायी एलिमेंट के तौर पर दिखता है.
• फ़िल्टर: इससे उपयोगकर्ताओं को विकल्पों के सेट से कॉन्टेंट को बेहतर बनाने में मदद मिलती है. इन्हें चुना या चुना न जा सकता. चुने जाने पर, इनमें सही का निशान वाला आइकॉन दिख सकता है.
• इनपुट: उपयोगकर्ता से मिली जानकारी दिखाता है. जैसे, किसी मेन्यू में चुने गए आइटम. इनमें आइकॉन और टेक्स्ट शामिल हो सकता है. साथ ही, इन्हें हटाने के लिए '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

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

उभरा हुआ चिप

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

अन्य संसाधन

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