এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

কার্ড

Card কম্পোজেবল আপনার UI-এর জন্য একটি ম্যাটেরিয়াল ডিজাইন কন্টেইনার হিসেবে কাজ করে। কার্ড সাধারণত একটি একক সুসংহত বিষয়বস্তু উপস্থাপন করে। নিম্নলিখিত উদাহরণগুলিতে দেখানো হয়েছে আপনি কোথায় একটি কার্ড ব্যবহার করতে পারেন:

একটি শপিং অ্যাপের পণ্য।
একটি নিউজ অ্যাপের সংবাদ।
যোগাযোগ অ্যাপের একটি বার্তা।

একটি একক বিষয়বস্তু প্রদর্শনের উপর গুরুত্ব দেওয়াই Card অন্যান্য কন্টেইনার থেকে আলাদা করে। উদাহরণস্বরূপ, Scaffold একটি সম্পূর্ণ স্ক্রিনের সাধারণ কাঠামো প্রদান করে। কার্ড সাধারণত একটি বৃহত্তর লেআউটের মধ্যে একটি ছোট UI উপাদান, যেখানে Column বা Row মতো লেআউট কম্পোনেন্টগুলো একটি সহজ এবং আরও সাধারণ API প্রদান করে।

লেখা ও আইকন দ্বারা সজ্জিত একটি উঁচু কার্ড। — **চিত্র ১.** লেখা ও আইকন দ্বারা সজ্জিত একটি কার্ডের উদাহরণ।

মৌলিক বাস্তবায়ন

Compose-এর অন্যান্য কন্টেইনারের মতোই Card আচরণ। এর ভেতরে অন্যান্য কম্পোজেবল কল করার মাধ্যমে এর বিষয়বস্তু ঘোষণা করা হয়। উদাহরণস্বরূপ, নিচের সংক্ষিপ্ত উদাহরণটিতে Card কীভাবে Text কে কল করে তা বিবেচনা করুন:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

উন্নত বাস্তবায়ন

Card এর API সংজ্ঞার জন্য রেফারেন্সটি দেখুন। এটি বেশ কিছু প্যারামিটার নির্ধারণ করে, যা আপনাকে কম্পোনেন্টটির চেহারা ও আচরণ কাস্টমাইজ করার সুযোগ দেয়।

উল্লেখযোগ্য কিছু বিষয় নিচে উল্লেখ করা হলো:

elevation : কম্পোনেন্টটিতে একটি ছায়া যোগ করে, যার ফলে এটিকে ব্যাকগ্রাউন্ডের উপরে উঁচু বলে মনে হয়।
colors : কন্টেইনার এবং এর যেকোনো চাইল্ড উভয়ের ডিফল্ট রঙ সেট করতে CardColors টাইপটি ব্যবহার করে।
enabled : এই প্যারামিটারে false পাস করলে, কার্ডটি নিষ্ক্রিয় হিসেবে প্রদর্শিত হবে এবং ব্যবহারকারীর ইনপুটে সাড়া দেবে না।
onClick : সাধারণত, একটি Card ক্লিক ইভেন্ট গ্রহণ করে না। তাই, যে প্রধান ওভারলোডটি আপনার লক্ষ্য করা উচিত, সেটি হলো যেটি একটি onClick প্যারামিটার নির্ধারণ করে। যদি আপনি চান যে আপনার Card ইমপ্লিমেন্টেশনটি ব্যবহারকারীর প্রেসে সাড়া দিক, তবে আপনার এই ওভারলোডটি ব্যবহার করা উচিত।

নিম্নলিখিত উদাহরণটি দেখায় যে আপনি কীভাবে এই প্যারামিটারগুলি, সেইসাথে shape এবং modifier এর মতো অন্যান্য সাধারণ প্যারামিটারগুলি ব্যবহার করতে পারেন।

পূরণ করা কার্ড

নিচে একটি পূরণ করা কার্ড কীভাবে তৈরি করা যায় তার একটি উদাহরণ দেওয়া হলো।

এখানে মূল বিষয়টি হলো ফিল করা রঙ পরিবর্তন করার জন্য colors প্রপার্টির ব্যবহার।

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

এই বাস্তবায়নটি নিম্নরূপ:

কার্ডটি ম্যাটেরিয়াল থিমের সারফেস ভ্যারিয়েন্ট রঙ দিয়ে পূরণ করা হয়। — **চিত্র ২.** একটি পূরণ করা কার্ডের উদাহরণ।

উন্নত কার্ড

নিম্নলিখিত কোড স্নিপেটটি একটি এলিভেটেড কার্ড কীভাবে প্রয়োগ করতে হয় তা দেখায়। এর জন্য নির্দিষ্ট ElevatedCard কম্পোজেবলটি ব্যবহার করুন।

আপনি elevation প্রপার্টি ব্যবহার করে এলিভেশনের চেহারা এবং এর ফলে সৃষ্ট ছায়া নিয়ন্ত্রণ করতে পারেন।

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

এই বাস্তবায়নটি নিম্নরূপ:

অ্যাপের ব্যাকগ্রাউন্ডের উপরে একটি কার্ড উঁচু হয়ে আছে এবং সেটির একটি ছায়া রয়েছে। — **চিত্র ৩.** একটি উঁচু কার্ডের উদাহরণ।

রূপরেখাযুক্ত কার্ড

নিম্নে একটি আউটলাইন করা কার্ডের উদাহরণ দেওয়া হলো। এর জন্য নির্দিষ্ট OutlinedCard কম্পোজেবলটি ব্যবহার করুন।

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}Card.kt

এই বাস্তবায়নটি নিম্নরূপ:

কার্ডটির চারপাশে একটি পাতলা কালো বর্ডার রয়েছে। — **চিত্র ৪।** রূপরেখা দেওয়া কার্ডের উদাহরণ।

সীমাবদ্ধতা

কার্ডগুলিতে নিজস্ব স্ক্রল বা ডিসমিস অ্যাকশন থাকে না, কিন্তু যে কম্পোজেবলগুলিতে এই বৈশিষ্ট্যগুলি রয়েছে, সেগুলির সাথে কার্ডগুলিকে ইন্টিগ্রেট করা যায়। উদাহরণস্বরূপ, একটি কার্ডে সোয়াইপ টু ডিসমিস প্রয়োগ করতে, এটিকে SwipeToDismiss কম্পোজেবলের সাথে ইন্টিগ্রেট করুন। স্ক্রলের সাথে ইন্টিগ্রেট করতে, verticalScroll এর মতো স্ক্রল মডিফায়ার ব্যবহার করুন। আরও তথ্যের জন্য স্ক্রল ডকুমেন্টেশন দেখুন।

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

ম্যাটেরিয়াল UI ডক্স