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) ) } ) }
लागू होने पर यह ऐसा दिखता है.
फ़िल्टर चिप
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 }, ) }
चुने न होने पर, यह लागू करने का तरीका इस तरह दिखता है:
चुनने पर, यह इस तरह दिखता है:
इनपुट चिप
उपयोगकर्ता इंटरैक्शन से मिलने वाले चिप बनाने के लिए, 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) ) }, ) }
लागू होने पर यह ऐसा दिखता है.
सुझाव वाला चिप
SuggestionChip
कॉम्पोज़ेबल, इस पेज पर दी गई सूची में शामिल कॉम्पोज़ेबल में सबसे बुनियादी है. इसकी एपीआई परिभाषा और इस्तेमाल के सामान्य उदाहरण, दोनों ही मामलों में ऐसा है. सुझाव वाले चिप, डाइनैमिक तौर पर जनरेट किए गए सुझाव दिखाते हैं. उदाहरण के लिए, एआई वाले चैट ऐप्लिकेशन में, सबसे हाल ही के मैसेज के लिए संभावित जवाब दिखाने के लिए, सुझाव वाले चिप का इस्तेमाल किया जा सकता है.
SuggestionChip
को लागू करने का यह तरीका देखें:
@Composable fun SuggestionChipExample() { SuggestionChip( onClick = { Log.d("Suggestion chip", "hello world") }, label = { Text("Suggestion chip") } ) }
लागू होने पर यह ऐसा दिखता है:
उभरा हुआ चिप
इस दस्तावेज़ में दिए गए सभी उदाहरणों में, ऐसे बुनियादी कॉम्पोज़ेबल का इस्तेमाल किया गया है जो फ़्लैट दिखते हैं. अगर आपको ऐसा चिप चाहिए जो बेहतर दिखे, तो इन तीन कॉम्पोज़ेबल में से किसी एक का इस्तेमाल करें: