बैज

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

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

एपीआई सरफ़ेस

अपने ऐप्लिकेशन में बैज लागू करने के लिए, 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 { mutableIntStateOf(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

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

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

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

अन्य संसाधन

• Material 3 - बैज
• BadgedBox
• Badge