Jetpack Compose Glimmer-এ টাইটেল চিপ

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, TitleChip কম্পোনেন্ট হল একটি নন-ইন্টার‍্যাক্টিভ কম্পোনেন্ট যা সংশ্লিষ্ট কন্টেন্টের জন্য সংক্ষিপ্ত কনটেক্সট বা লেবেলিং প্রদান করে, যেমন Card বা VerticalList।

সংক্ষিপ্ত তথ্য যেমন, ছোট নাম, বিভাগের নাম বা স্ট্যাটাস ইন্ডিকেটরের জন্য টাইটেল চিপ ব্যবহার করুন। সাধারণত, স্পষ্ট গঠনগত সম্পর্ক স্থাপন করতে, আপনাকে কন্টেন্টের উপরে সেটির বর্ণনা করা টাইটেল চিপ প্লেস করতে হবে।

প্রাথমিক উদাহরণ: ছোট শীর্ষক চিপ তৈরি করা

নিচে দেওয়া কোডটি একটি সাধারণ শীর্ষক চিপ তৈরি করে:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSample.kt

প্রাথমিক উদাহরণ: আইকন সহ টাইটেল চিপ তৈরি করা

নিচের কোডটি আইকন সহ একটি শীর্ষক চিপ তৈরি করে:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

উদাহরণ: কার্ড সহ একটি শীর্ষক চিপ তৈরি করা

অন্য কম্পোনেন্টের সাথে টাইটেল চিপ ব্যবহার করতে, কম্পোজেবল এ অন্য কম্পোনেন্টের উপরে টাইটেল চিপ TitleChipDefaults.associatedContentSpacing প্লেস করুন। নিম্নলিখিত কোডটি কার্ড সহ একটি শিরোনাম চিপ তৈরি করে:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
TitleChipSample.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• শীর্ষক চিপটি অনুভূমিকভাবে কেন্দ্রে থাকে, যা কার্ডের উপরে প্লেস করা শীর্ষক চিপের জন্য সাধারণ অ্যালাইনমেন্ট।
• দুটি কম্পোনেন্টের মধ্যে সঠিক পরিমাণে উল্লম্ব স্পেসিং প্রদান করার জন্য Spacer-এর একটি নির্দিষ্ট উচ্চতা আছে। এটি TitleChipDefaults.associatedContentSpacing ব্যবহার করে সংজ্ঞায়িত করা হয়।
• টেক্সট কন্টেন্টের আগে অতিরিক্ত ভিজ্যুয়াল প্রসঙ্গ যোগ করতে একটি ঐচ্ছিক leadingIcon ব্যবহার করে।
• শীর্ষক চিপ অটোমেটিক তার টেক্সটের জন্য caption স্টাইল ব্যবহার করে।
• শীর্ষক চিপ ইন্টার‍্যাক্টিভ নয়। ক্লিক করা যায় এমন লেবেলের প্রয়োজন হলে, একটি Button বা অন্য কোনও ইন্ট্যার‍্যাক্টিভ কম্পোনেন্ট ব্যবহার করুন।