कार्ड

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

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

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 ज़्यादा जानकारी के लिए, स्क्रोल करने की सुविधा से जुड़ा दस्तावेज़ पढ़ें.

अन्य संसाधन

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