कार्ड

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

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

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

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

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

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

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

ध्यान दें: डिफ़ॉल्ट रूप से, Card अपने कॉन्टेंट को Column कंपोज़ेबल में रैप करता है और हर आइटम को पिछले आइटम के नीचे कार्ड में रखता है.

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

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

अन्य संसाधन

• Material UI के दस्तावेज़