ব্যাজ

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

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

এপিআই সারফেস

আপনার অ্যাপ্লিকেশনে ব্যাজ বাস্তবায়নের জন্য 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

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

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

এই বাস্তবায়নটি নিম্নরূপ দেখাচ্ছে:

একটি ব্যাজ বাস্তবায়ন যাতে একটি শপিং কার্টে থাকা আইটেমের সংখ্যা থাকে।
চিত্র ৩। একটি ব্যাজ যা একটি শপিং কার্টে থাকা আইটেমের সংখ্যা প্রদর্শন করে।

অতিরিক্ত সম্পদ