कार्ड

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

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

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

उभरे हुए कार्ड में टेक्स्ट और आइकॉन दिख रहे हैं.
पहली इमेज. ऐसे कार्ड का उदाहरण जिसमें टेक्स्ट और आइकॉन दिख रहे हैं.

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

Card, कंपोज़ में मौजूद अन्य कंटेनर की तरह ही काम करता है. इसके कॉन्टेंट की जानकारी यहां दी जाती है कंपोज़ेबल को कॉल किया जा सकता है. उदाहरण के लिए, देखें कि 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 जैसे स्क्रोल मॉडिफ़ायर क�� इस्तेमाल करें. ज़्यादा जानकारी के लिए, स्क्रोल करने के बारे में दस्तावेज़ देखें.

अन्य संसाधन