कार्ड

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

अन्य संसाधन

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