कार्ड

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

अन्य संसाधन