জেটপ্যাক কম্পোজ গ্লিমারে, Card কম্পোনেন্টটি সম্পর্কিত কন্টেন্টের প্রধান ধারক হিসেবে কাজ করে, যা সহজে বোধগম্য তথ্যের এককগুলোর জন্য একটি স্পষ্ট দৃশ্যমান সীমানা তৈরি করে। কার্ডগুলো অত্যন্ত অভিযোজনযোগ্য এবং এতে মূল কন্টেন্ট, ঐচ্ছিক শিরোনাম, উপ-শিরোনাম এবং শুরুতে বা শেষে আইকনের সমন্বয় সমর্থন করে। কার্ডগুলো ডিফল্টরূপে সর্বাধিক উপলব্ধ প্রস্থ জুড়ে থাকে, এগুলোতে ফোকাস করা যায় এবং আপনি চাইলে এগুলোকে ক্লিকযোগ্যও করতে পারেন। কার্ডগুলো একটি উল্লম্ব বিন্যাস সমর্থন করে, যেখানে হেডার ইমেজটি সবার উপরে থাকে এবং এর পরে শিরোনাম, উপ-শিরোনাম ও মূল কন্টেন্ট থাকে।
কার্ডগুলো Jetpack Compose Glimmer সারফেস সিস্টেমের উপর ভিত্তি করে তৈরি করা হয়, তাই এগুলো ডেপথ এফেক্ট, ক্লিপিং এবং সামঞ্জস্যপূর্ণ বর্ডার হাইলাইটের মতো ভৌত বৈশিষ্ট্যগুলো লাভ করে।
শারীরস্থান এবং স্লট
একটি জেটপ্যাক কম্পোজ গ্লিমার কার্ড বেশ কিছু বিশেষায়িত উপাদান দিয়ে তৈরি করা হয়, যা আপনাকে এর বিষয়বস্তু এবং বিন্যাস নিজের মতো করে সাজানোর সুযোগ দেয়।
| স্লট | বর্ণনা |
|---|---|
হেডার | কার্ডের উপরের অংশ, যা একটি ছবি রাখার জন্য ডিজাইন করা হয়েছে। |
শিরোনাম এবং উপশিরোনাম | এই টেক্সট ফিল্ডগুলো কার্ডের প্রধান ও গৌণ লেবেল প্রদান করে। শিরোনামটি উপ-শিরোনামের উপরে স্থাপন করা হয়। |
শীর্ষস্থানীয় আইকন | একটি ঐচ্ছিক আইকন (সাধারণত একটি |
ট্রেইলিং আইকন | একটি ঐচ্ছিক আইকন যা কার্ডের বিষয়বস্তু এলাকার শেষে প্রদর্শিত হয়। |
মূল বিষয়বস্তু | মূল |
কার্ড ডিফল্ট
কার্ডগুলির ক্ষেত্রে নিম্নলিখিত ডিফল্টগুলি প্রযোজ্য:
- প্রস্থ : ডিসপ্লে গ্লাসে পাঠযোগ্যতা উন্নত করার জন্য কার্ডগুলো ডিসপ্লের সর্বাধিক উপলব্ধ প্রস্থ জুড়ে থাকে।
- সর্বনিম্ন উচ্চতা :
80.dp - টেক্সটের উল্লম্ব ব্যবধান :
3.dp - হেডারের আকৃতি :
24.dpকোণাসহRoundedCornerShapeব্যবহার করা হয়েছে। - কন্টেন্ট প্যাডিং : ডিফল্ট হিসেবে
GlimmerTheme.componentSpacingValues.mediumব্যবহৃত হয়। এটি হেডার ইমেজ এবং কন্টেন্ট কন্টেইনারের চারপাশের বাইরের প্যাডিংকে প্রভাবিত করে। - আকৃতি : ডিফল্ট হিসেবে
GlimmerTheme.shapes.mediumব্যবহৃত হয়। টেক্সট রেন্ডারিং : নিম্নলিখিত স্লটগুলির জন্য
GlimmerTheme.typographyথেকে ডিফল্ট মান ব্যবহার করে:- শিরোনাম:
bodyMedium - সাবটাইটেল:
caption - মূল বিষয়বস্তু:
bodySmall
- শিরোনাম:
উদাহরণ: একাধিক স্লট সহ জটিল কার্ড
নিম্নলিখিত কোডটিতে দেখানো হয়েছে কীভাবে একাধিক স্লট একসাথে ব্যবহার করে একটি কার্ড তৈরি করা যায়।
Card { Text("This is a card") }
কোড সম্পর্কে মূল বিষয়গুলো
- কার্ডের বিষয়বস্তু ও কাঠামো কাস্টমাইজ করার জন্য
title,subtitleএবংleadingIconএর মতো বিভিন্ন কার্ড এলিমেন্ট কীভাবে ব্যবহার করতে হয়, তা দেখানো হয়েছে। - সম্পূর্ণ কার্ড পৃষ্ঠটিকে ইন্টারেক্টিভ করতে
onClickসাথেCardওভারলোড ব্যবহার করা হয়।