ব্যাজ

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

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

এপিআই পৃষ্ঠ

আপনার অ্যাপ্লিকেশনে ব্যাজ প্রয়োগ করতে 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 ব্যাজের ভেতরে প্রদর্শিত হয়। এক্ষেত্রে, এটি কার্টে থাকা আইটেমের সংখ্যা প্রদর্শন করে।

এই বাস্তবায়নটি নিম্নরূপ:

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

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