Jetpack Compose Glimmer-এ কার্ড

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

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

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

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

Jetpack Compose Glimmer-এ, Card কম্পোনেন্টটি সম্পর্কিত কন্টেন্টের জন্য প্রাথমিক কন্টেনার হিসেবে কাজ করে, যা তথ্যের হজমযোগ্য ইউনিটের জন্য একটি স্পষ্ট ভিজ্যুয়াল বাউন্ডারি তৈরি করে। কার্ডগুলি অত্যন্ত অ্যাডাপ্টেবল, এগুলি মূল কন্টেন্ট, ঐচ্ছিক শীর্ষক, সাবটাইটেল এবং লিডিং বা ট্রেলিং আইকনের কম্বিনেশন সাপোর্ট করে। কার্ডগুলি ডিফল্ট হিসেবে সর্বাধিক উপলভ্য প্রস্থ পূরণ করে, ফোকাস করা যায় এবং আপনি সেগুলি ক্লিক করা যায় এমন হিসেবেও সেট করতে পারেন। কার্ডে উল্লম্ব বিন্যাস কাজ করে, যেখানে হেডার ছবি সবচেয়ে উপরে থাকে, তারপরে থাকে শিরোনাম, উপশিরোনাম ও মূল কন্টেন্ট।

কার্ডগুলি Jetpack Compose Glimmer সারফেস সিস্টেমের উপর ভিত্তি করে তৈরি করা হয়, তাই সেগুলি ডেপথ এফেক্ট, ক্লিপিং এবং ধারাবাহিক বর্ডার হাইলাইটের মতো ফিজিক্যাল প্রপার্টি ইনহেরিট করে।

অ্যানাটমি ও স্লট

Jetpack Compose গ্লিমার কার্ড একাধিক বিশেষ এলিমেন্ট দিয়ে তৈরি হয় যা আপনাকে এর কন্টেন্ট ও লেআউট কাস্টমাইজ করতে দেয়।

কার্ডের ডিফল্ট সেটিং

কার্ডের ক্ষেত্রে নিম্নলিখিত ডিফল্ট প্রযোজ্য হয়:

• প্রস্থ: ডিসপ্লে গ্লাসে পঠনযোগ্যতা অপ্টিমাইজ করতে কার্ডগুলি ডিসপ্লের সর্বাধিক উপলভ্য প্রস্থ পূরণ করে।
• সর্বনিম্ন উচ্চতা: 80.dp
• টেক্সটের উল্লম্ব স্পেসিং: 3.dp
• হেডারের আকার: 24.dp কোণ সহ RoundedCornerShape ব্যবহার করে
• কন্টেন্ট প্যাডিং: ডিফল্ট হিসেবে GlimmerTheme.componentSpacingValues.medium থাকে। এটি হেডার ছবি ও কন্টেন্ট কন্টেনারের চারপাশের সবচেয়ে বাইরের প্যাডিংকে প্রভাবিত করে।
• আকৃতি: ডিফল্ট হিসেবে GlimmerTheme.shapes.medium সেট করা থাকে।

• টেক্সট রেন্ডারিং: নিম্নলিখিত স্লটের জন্য GlimmerTheme.typography থেকে ডিফল্ট ভ্যালু ব্যবহার করে:

  • নাম: bodyMedium
  • সাবটাইটেল: caption
  • প্রধান কন্টেন্ট: bodySmall

যেমন: সাধারণ কার্ড

কার্ড তৈরি করার জন্য প্রয়োজনীয় ন্যূনতম কোডটি নিম্নলিখিত কোডে দেখানো হয়েছে:

Card { Text("This is a card") }
CardSamples.kt

উদাহরণ: একাধিক স্লট সহ কার্ড

কার্ড তৈরি করার জন্য কীভাবে একাধিক স্লট একসাথে ব্যবহার করতে হয় তা নিম্নলিখিত কোড থেকে জানতে পারবেন:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") }
) {
    Text("This is a complete card")
}
CardSamples.kt

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

• কার্ডের কন্টেন্ট ও স্ট্রাকচার কাস্টমাইজ করতে, title, subtitle ও leadingIcon-এর মতো বিভিন্ন কার্ড এলিমেন্ট কীভাবে ব্যবহার করতে হয় তা দেখানো হয়।
• সম্পূর্ণ কার্ড সারফেসকে ইন্টার‌্যাক্টিভ করে তুলতে onClick-এর সাথে Card ওভারলোড ব্যবহার করে।

অ্যাকশন কার্ড

আপনি কার্ডের সাথে অ্যাকশন বোতাম যোগ করতে চাইলে, একটি ActionCard ব্যবহার করুন। অ্যাকশন কার্ডে স্ট্যান্ডার্ড কার্ডের মতো একই এলিমেন্ট থাকে এবং নিচের বোতামকে সংজ্ঞায়িত করে এমন একটি অতিরিক্ত action প্যারামিটারও থাকে।

উদাহরণ: প্রাথমিক অ্যাকশন কার্ড

এই কোড থেকে কীভাবে ActionCard তৈরি করতে হয় তা জানতে পারবেন:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

উদাহরণ: আইকন সহ অ্যাকশন কার্ড

এই কোডটি দেখায় যে কীভাবে আইকন সহ আরও জটিল ActionCard তৈরি করতে হয়:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt