কার্ড

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

• শপিং অ্যাপে কোনও প্রোডাক্ট।
• নিউজ অ্যাপে দেখানো কোনও খবর।
• কমিউনিকেশন অ্যাপে মেসেজ।

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

ছবি ১. টেক্সট ও আইকন সহ কার্ডের উদাহরণ।

প্রাথমিক প্রয়োগ

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

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

মনে রাখবেন: ডিফল্ট হিসেবে, একটি Card তার কন্টেন্টকে একটি Column কম্পোজেবলে র‍্যাপ করে এবং কার্ডের মধ্যে প্রতিটি আইটেমকে আগেরটির নিচে রাখে।

উন্নত প্রয়োগ

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-এর মতো স্ক্রল মডিফায়ার ব্যবহার করুন। আরও তথ্যের জন্য Scroll ডকুমেন্টেশন দেখুন।

অতিরিক্ত রিসোর্স

• Material UI ডকুমেন্ট