Jetpack Compose Glimmer में कार्ड

XR डिवाइस

इस गाइड से, आपको इन XR डिवाइस के लिए अनुभव बनाने में मदद मिलती है.

XR डिवाइस के टाइप के बारे में जानें →

XR डिवाइस के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, Card कॉम्पोनेंट, मिलते-जुलते कॉन्टेंट के लिए मुख्य कंटेनर के तौर पर काम करता है. इससे, जानकारी के समझने लायक यूनिट के लिए साफ़ तौर पर दिखने वाली सीमा बनती है. कार्ड, ज़रूरत के हिसाब से ढलने वाले होते हैं. इनमें मुख्य कॉन्टेंट, टाइटल, सबटाइटल, और लीडिंग या ट्रेलिंग आइकॉन के कॉम्बिनेशन शामिल किए जा सकते हैं. कार्ड, डिफ़ॉल्ट रूप से उपलब्ध ज़्यादा से ज़्यादा चौड़ाई में दिखते हैं. इन पर फ़ोकस किया जा सकता है. साथ ही, इन्हें क्लिक किया जा सकता है. कार्ड, वर्टिकल तरीके से व्यवस्थित किए जा सकते हैं. इनमें हेडर इमेज सबसे ऊपर होती है. इसके बाद, टाइटल, सबटाइटल, और बॉडी कॉन्टेंट होता है.

कार्ड, Jetpack Compose Glimmer के सर्फ़ेस सिस्टम पर बने होते हैं. इसलिए, इनमें डेप्थ इफ़ेक्ट, क्लिपिंग, और बॉर्डर हाइलाइट जैसी फ़िज़िकल प्रॉपर्टी शामिल होती हैं.

कार्ड की बनावट और स्लॉट

Jetpack Compose Glimmer का कार्ड, कई खास एलिमेंट से बना होता है. इनकी मदद से, कार्ड के कॉन्टेंट और लेआउट को पसंद के मुताबिक बनाया जा सकता है.

कार्ड की डिफ़ॉल्ट सेटिंग

कार्ड पर ये डिफ़ॉल्ट सेटिंग लागू होती हैं:

• चौड़ाई: डिसप्ले वाले चश्मे पर, कार्ड, डिसप्ले की उपलब्ध ज़्यादा से ज़्यादा चौड़ाई में दिखते हैं, ताकि उन्हें आसानी से पढ़ा जा सके.
• कम से कम ऊंचाई: 80.dp
• टेक्स्ट के बीच वर्टिकल स्पेस: 3.dp
• हेडर की शेप: RoundedCornerShape का इस्तेमाल करता है. इसके कोने 24.dp के होते हैं
• कॉन्टेंट पैडिंग: डिफ़ॉल्ट रूप से GlimmerTheme.componentSpacingValues.medium पर सेट होती है. इससे, हेडर इमेज और कॉन्टेंट कंटेनर के चारों ओर सबसे बाहरी पैडिंग पर असर पड़ता है.
• आकार: डिफ़ॉल्ट रूप से, GlimmerTheme.shapes.medium पर सेट होती है.

• टेक्स्ट रेंडरिंग: इन स्लॉट के लिए, GlimmerTheme.typography की डिफ़ॉल्ट वैल्यू का इस्तेमाल करता है:

  • टाइटल: bodyMedium
  • सबटाइटल: caption
  • मुख्य कॉन्टेंट: bodySmall

उदाहरण: सामान्य कार्ड

नीचे दिए गए कोड में, कार्ड बनाने के लिए ज़रूरी कम से कम कोड दिखाया गया है:

Card { Text("This is a card") }
CardSamples.kt

उदाहरण: एक से ज़्यादा स्लॉट वाला कार्ड

नीचे दिए गए कोड में, कार्ड बनाने के लिए एक साथ कई स्लॉट का इस्तेमाल करने का तरीका दिखाया गया है:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}
CardSamples.kt

कोड के बारे में अहम बातें

• इसमें, कार्ड के कॉन्टेंट और स्ट्रक्चर को पसंद के मुताबिक बनाने के लिए, title, subtitle, और leadingIcon जैसे अलग-अलग कार्ड एलिमेंट का इस्तेमाल करने का तरीका दिखाया गया है.
• इसमें, पूरे कार्ड को इंटरैक्टिव बनाने के लिए, Card ओवरलोड के साथ onClick का इस्तेमाल किया गया है.

ऐक्शन कार्ड

अगर आपको किसी कार्ड के साथ ऐक्शन बटन शामिल करना है, तो ActionCard का इस्तेमाल करें. ऐक्शन कार्ड में, स्टैंडर्ड कार्ड वाले एलिमेंट ही होते हैं. साथ ही, इसमें एक और action पैरामीटर शामिल होता है, जो सबसे नीचे दिखने वाले बटन को तय करता है.

उदाहरण: सामान्य ऐक्शन कार्ड

इस कोड में, ActionCard बनाने का तरीका दिखाया गया है:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}
CardSamples.kt

उदाहरण: आइकॉन वाला ऐक्शन कार्ड

इस कोड में, आइकॉन के साथ ज़्यादा जटिल ActionCard बनाने का तरीका दिखाया गया है:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}
CardSamples.kt