चिप

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

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

उभरी हुई चिप

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

• ElevatedAssistChip
• ElevatedFilterChip
• ElevatedSuggestionChip

अन्य संसाधन

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