कार्ड

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

अन्य संसाधन