ব্যাজ

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

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

API সারফেস

আপনার অ্যাপ্লিকেশনে ব্যাজ প্রয়োগ করতে BadgedBox কম্পোজেবল ব্যবহার করুন। এটি আসলে একটি কন্টেনার। আপনি এই দুটি প্রধান প্যারামিটার দিয়ে এর উপস্থিতি নিয়ন্ত্রণ করেন:

  • content: BadgedBox-এ থাকা কম্পোজেবল কন্টেন্ট। সাধারণত Icon।
  • badge: কম্পোজেবল যা কন্টেন্টের উপর ব্যাজ হিসেবে দেখা যায়। সাধারণত, নির্দিষ্ট Badge কম্পোজেবল।

প্রাথমিক উদাহরণ

এই কোড স্নিপেট BadgedBox-এর প্রাথমিক প্রয়োগ দেখায়:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            painter = rememberVectorPainter(AppIcons.Mail),
            contentDescription = "Email"
        )
    }
}

এই উদাহরণে এমন একটি ব্যাজ দেখানো হয়েছে যা প্রদত্ত 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(
                painter = rememberVectorPainter(AppIcons.ShoppingCart),
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}

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

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

এই ধরনের প্রয়োগ নিচে দেখানো হল:

একটি ব্যাজ ইমপ্লিমেন্টেশন যাতে শপিং কার্টে থাকা আইটেমের সংখ্যা থাকে।
ছবি ৩. শপিং কার্টে কতগুলি আইটেম আছে তা ব্যাজে দেখানো হয়।

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