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

কার্ড

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

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

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

পাঠ্য এবং আইকন সহ একটি উন্নত কার্ড। — **চিত্র 1.** টেক্সট এবং আইকন দিয়ে তৈরি একটি কার্ডের উদাহরণ।

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

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

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

একটি কার্ড উপাদান থিম থেকে পৃষ্ঠ বৈকল্পিক রঙ দিয়ে ভরা হয়. — **ছবি 2.** একটি ভর্তি কার্ডের উদাহরণ।

এলিভেটেড কার্ড

নিম্নোক্ত স্নিপেট দেখায় কিভাবে একটি উন্নত কার্ড বাস্তবায়ন করতে হয়। ডেডিকেটেড 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

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

একটি কার্ড ছায়া সহ অ্যাপের পটভূমির উপরে উন্নীত হয়। — **চিত্র 3.** একটি উন্নত কার্ডের উদাহরণ।

আউটলাইন কার্ড

নীচে একটি রূপরেখাযুক্ত কার্ডের একটি উদাহরণ। ডেডিকেটেড 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

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

একটি কার্ড একটি পাতলা কালো সীমানা সঙ্গে রূপরেখা আছে. — **চিত্র 4.** একটি রূপরেখাযুক্ত কার্ডের উদাহরণ।

সীমাবদ্ধতা

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

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

উপাদান UI ডক্স