জেটপ্যাক কম্পোজ গ্লিমারে টাইটেল চিপস

প্রযোজ্য এক্সআর ডিভাইস

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

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

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 বা অন্য কোনো ইন্টারেক্টিভ কম্পোনেন্ট ব্যবহার করুন।