बैज

स्थिति बताने के लिए एक छोटा विज़ुअल एलिमेंट दिखाने के लिए, बैज का इस्तेमाल करें या अन्य कंपोज़ेबल में न्यूमेरिक वैल्यू को शामिल किया जा सकता है. यहां कुछ ऐसे सामान्य उदाहरण दिए गए हैं जिनमें तो बैज का इस्तेमाल इन कामों में किया जा सकता है:

  • सूचनाएं: किसी ऐप्लिकेशन आइकॉन पर नहीं पढ़ी गई सूचनाओं की संख्या दिखाता है या नोटिफ़िकेशन घंटी का इस्तेमाल करें.
  • मैसेज: किसी चैट ऐप्लिकेशन में मौजूद नए या नहीं पढ़े गए मैसेज की जानकारी दें.
  • स्थिति के बारे में अपडेट: किसी टास्क का स्टेटस दिखाएं, जैसे कि "पूरा हो गया", " प्रोग्रेस," या "यह सफल नहीं हुआ."
  • कार्ट की संख्या: उपयोगकर्ता के शॉपिंग कार्ट में मौजूद आइटम की संख्या दिखाता है.
  • नया कॉन्टेंट: उपयोगकर्ता के लिए उपलब्ध नया कॉन्टेंट या सुविधाएं हाइलाइट करें.
बैज कॉम्पोनेंट के अलग-अलग उदाहरण.
पहली इमेज. बैज के उदाहरण

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

अपने आवेदन में बैज लागू करने के लिए, BadgedBox कंपोज़ेबल का इस्तेमाल करें. यह आखिरकार एक कंटेनर होता है. इसके दिखने के तरीके को आप इन दो मुख्य सुविधाओं से कंट्रोल करते हैं पैरामीटर:

  • content: BadgedBox में मौजूद कंपोज़ेबल कॉन्टेंट. आम तौर पर Icon.
  • badge: कंपोज़ेबल, जो कॉन्टेंट के ऊपर बैज के तौर पर दिखता है. आम तौर पर, खास तौर पर बनाया गया Badge कंपोज़ेबल.

बुनियादी उदाहरण

यह कोड स्निपेट, BadgedBox को बुनियादी तौर पर लागू करने का तरीका दिखाता है:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

इस उदाहरण में, एक ऐसा बैज दिखाया गया है जो दिए गए Icon कंपोज़ेबल को ओवरलैप करता है. नोट जोड़ें को कोड में शामिल करें:

  • BadgedBox पूरे कंटेनर के तौर पर काम करता है.
  • BadgedBox के badge पैरामीटर का आर्ग्युमेंट, Badge है. Badge में खुद का कोई आर्ग्युमेंट नहीं होता है. इसलिए, ऐप्लिकेशन डिफ़ॉल्ट तौर पर बैज, जो एक छोटा लाल घेरा होता है.
  • Icon, BadgedBox के content पैरामीटर के लिए आर्ग्युमेंट के तौर पर काम करता है. यह वह आइकॉन है जिस पर बैज दिखता है. इस मामले में, यह एक मेल आइकॉन है.

यह ऐसा दिखता है:

एक सामान्य बैज, जिसमें कोई कॉन्टेंट नहीं होता.
दूसरी इमेज. बैज को बहुत कम लागू करना.

ज़्यादा जानकारी वाला उदाहरण

नीचे दिए गए स्निपेट में बताया गया है कि बैज में वैल्यू कैसे दिखाई जा सकती हैं उपयोगकर्ता की कार्रवाइयों का जवाब दें.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

इस उदाहरण में शॉपिंग कार्ट का एक आइकॉन शामिल किया गया है. इस आइकॉन में एक बैज मौजूद है, जो उपयोगकर्ता के कार्ट में मौजूद आइटम की संख्या.

  • BadgedBox सिर्फ़ तब दिखता है, जब आइटम की संख्या 0 से ज़्यादा हो.
  • containerColor और contentColor के लिए आर्ग्युमेंट, साइट के दिखने का तरीका कंट्रोल करते हैं को भी हाइलाइट कर सकता है.
  • Badge के कॉन्टेंट स्लॉट के लिए Text कंपोज़ेबल इसमें दिखता है को पहचान सकते हैं. इस मामले में, यह कार्ट में मौजूद आइटम की संख्या दिखाता है.

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

बैज लागू करने की प्रक्रिया, जिसमें शॉपिंग कार्ट में मौजूद आइटम की संख्या शामिल होती है.
तीसरी इमेज. शॉपिंग कार्ट में मौजूद सामान की संख्या दिखाने वाला बैज.

अन्य संसाधन