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

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

इस कोड से एक सामान्य कार्ड बनता है:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}
CardSamples.kt

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

इस कोड में बताया गया है कि कार्ड बनाने के लिए, एक साथ कई स्लॉट का इस्तेमाल कैसे किया जाता है.

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}
CardSamples.kt

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

• इसमें बताया गया है कि कार्ड के कॉन्टेंट और स्ट्रक्चर को पसंद के मुताबिक बनाने के लिए, header, title, leadingIcon, और action जैसे अलग-अलग कार्ड एलिमेंट का इस्तेमाल कैसे करें.
• इसमें, कार्रवाई के साथ स्टैंडर्ड Card ओवरलोड का इस्तेमाल किया गया है, क्योंकि सिर्फ़ कार्ड (या उसकी इंटरनल कार्रवाई) पर फ़ोकस किया जा सकता है. अगर आपको पूरे कार्ड सर्फ़ेस को इंटरैक्टिव बनाना है, तो इसके बजाय Card ओवरलोड के साथ onClick का इस्तेमाल करें.
• इस कार्ड में ऐक्शन स्लॉट का इस्तेमाल किया गया है. इसलिए, कार्ड सर्फ़ेस पर फ़ोकस नहीं किया जा सकता. इसके बजाय, फ़ोकस ऐक्शन बटन पर जाता है.