ব্যাজ

স্ট্যাটাস বা অন্য কম্পোজ করার উপযুক্ত আইটেমে সংখ্যাসূচক মান বোঝাতে, একটি ছোট ভিজ্যুয়াল এলিমেন্ট দেখাতে ব্যাজ ব্যবহার করুন। এখানে কয়েকটি সাধারণ পরিস্থিতি দেওয়া হল যেখানে আপনি ব্যাজ ব্যবহার করতে পারেন:

• বিজ্ঞপ্তি: অ্যাপ আইকন বা বিজ্ঞপ্তি বেল আইকনে না পড়া বিজ্ঞপ্তির সংখ্যা দেখায়।
• মেসেজ: চ্যাট অ্যাপ্লিকেশনের মধ্যে নতুন বা না পড়া মেসেজ নির্দেশ করে।
• স্ট্যাটাস আপডেট: টাস্কের স্ট্যাটাস দেখায়, যেমন "সম্পূর্ণ হয়েছে", "প্রসেসে আছে" বা "সম্পূর্ণ হয়নি"।
• কার্টে থাকা আইটেমের সংখ্যা: ব্যবহারকারীর শপিং কার্টে থাকা আইটেমের সংখ্যা দেখায়।
• নতুন কন্টেন্ট: ব্যবহারকারীর জন্য উপলভ্য নতুন কন্টেন্ট বা ফিচার হাইলাইট করুন।

API সারফেস

আপনার অ্যাপ্লিকেশনে ব্যাজ প্রয়োগ করতে 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-এর নিজস্ব কোনও আর্গুমেন্ট না থাকার কারণে, অ্যাপটি ডিফল্ট ব্যাজ দেখায়, যা একটি ছোট লাল বৃত্ত।
• BadgedBox-এর content প্যারামিটারের আর্গুমেন্ট হিসেবে Icon কাজ করে। এটি এমন একটি আইকন যার উপরে ব্যাজ দেখা যায়। এই ক্ষেত্রে, এটি একটি মেল আইকন।

এটি এইভাবে দেখানো হয়:

বিস্তারিত উদাহরণ

নিচের স্নিপেট থেকে আপনি বুঝতে পারবেন যে কীভাবে ব্যাজে এমন ভ্যালু দেখানো যায় যা ব্যবহারকারীর অ্যাকশনের উত্তর দেয়।

@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

এই উদাহরণে, ব্যাজ সহ একটি শপিং কার্ট আইকন প্রয়োগ করা হয়েছে যা ব্যবহারকারীর কার্টে থাকা আইটেমের সংখ্যা দেখায়।

• আইটেমের সংখ্যা ০-এর বেশি হলে তবেই BadgedBox দেখা যায়।
• containerColor ও contentColor-এর আর্গুমেন্ট ব্যাজের চেহারা কন্ট্রোল করে।
• Badge-এর কন্টেন্ট স্লটের জন্য Text কম্পোজ করার উপযুক্ত আইটেমটি ব্যাজের মধ্যে দেখা যায়। এই ক্ষেত্রে, এটি কার্টে থাকা আইটেমের সংখ্যা দেখায়।

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

অতিরিক্ত রিসোর্স

• Material 3 - ব্যাজ
• BadgedBox
• Badge