ব্যাজ

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

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

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 যুক্তি হিসেবে কাজ করে। এটি সেই আইকন যার উপরে ব্যাজটি প্রদর্শিত হয়। এই ক্ষেত্রে, এটি একটি মেইল ​​আইকন।

এটি এইভাবে প্রদর্শিত হয়:

একটি সাধারণ ব্যাজ যাতে কোন বিষয়বস্তু নেই।
চিত্র 2. একটি ন্যূনতম ব্যাজ বাস্তবায়ন।

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

নিম্নলিখিত স্নিপেট প্রদর্শন করে যে আপনি কীভাবে ব্যাজে মানগুলি প্রদর্শন করতে পারেন যা ব্যবহারকারীর ক্রিয়াগুলির প্রতিক্রিয়া জানায়৷ 

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableStateOf(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 শুধুমাত্র তখনই প্রদর্শিত হয় যখন আইটেমের সংখ্যা 0-এর বেশি হয়।
  • containerColor এবং contentColor আর্গুমেন্ট ব্যাজের উপস্থিতি নিয়ন্ত্রণ করে।
  • Badge কন্টেন্ট স্লটের জন্য কম্পোজযোগ্য Text ব্যাজের মধ্যে উপস্থিত হয়। এই ক্ষেত্রে, এটি কার্টে আইটেমের সংখ্যা প্রদর্শন করে।

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

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

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