कार्ड

Card कंपोज़ेबल, आपके यूज़र इंटरफ़ेस (यूआई) के लिए मटीरियल डिज़ाइन कंटेनर के तौर पर काम करता है. कार्ड में आम तौर पर, एक ही तरह का कॉन्टेंट होता है. यहां कुछ उदाहरण दिए गए हैं, जहां कार्ड का इस्तेमाल किया जा सकता है:

  • शॉपिंग ऐप्लिकेशन में मौजूद कोई प्रॉडक्ट.
  • किसी समाचार ऐप्लिकेशन में मौजूद कोई खबर.
  • कम्यूनिकेशन ऐप्लिकेशन में मौजूद कोई मैसेज.

Card में, एक ही कॉन्टेंट को दिखाने पर फ़ोकस किया जाता है. यही इसे अन्य कंटेनर से अलग बनाता है. उदाहरण के लिए, Scaffold पूरी स्क्रीन के लिए सामान्य स्ट्रक्चर उपलब्ध कराता है. कार्ड आम तौर पर, बड़े लेआउट में मौजूद छोटा यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है. वहीं, Column या Row जैसे लेआउट कॉम्पोनेंट, ज़्यादा सामान्य और आसान एपीआई उपलब्ध कराते हैं.

टेक्स्ट और आइकॉन के साथ उभरा हुआ कार्ड.
पहली इमेज. टेक्स्ट और आइकॉन से भरे कार्ड का उदाहरण.

बुनियादी तौर पर लागू करना

Card, Compose में मौजूद अन्य कंटेनर की तरह ही काम करता है. इसके कॉन्टेंट का एलान, इसके अंदर अन्य कंपोज़ेबल को कॉल करके किया जाता है. उदाहरण के लिए, इस छोटे से उदाहरण में देखें कि Card में Text को कैसे कॉल किया जाता है:

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

ऐडवांस तरीके से लागू करना

Card की एपीआई परिभाषा के लिए, रेफ़रंस देखें. यह कई पैरामीटर तय करता है. इनकी मदद से, कॉम्पोनेंट के दिखने के तरीके और उसके व्यवहार को पसंद के मुताबिक बनाया जा सकता है.

यहां कुछ ज़रूरी पैरामीटर दिए गए हैं:

  • 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 जैसे स्क्रोल मॉडिफ़ायर का इस्तेमाल करें. ज़्यादा जानकारी के लिए, स्क्रोल करने से जुड़े दस्तावेज़ देखें.

अन्य संसाधन