Jetpack Compose Glimmer में, Card कॉम्पोनेंट को एक यूनिट में, मिलती-जुलती जानकारी को ग्रुप करने और दिखाने के लिए डिज़ाइन किया गया है. कार्ड में कई तरह के बदलाव किए जा सकते हैं. इनमें मुख्य कॉन्टेंट, वैकल्पिक टाइटल और सबटाइटल, और लीडिंग या ट्रेलिंग आइकॉन के कॉम्बिनेशन शामिल हैं. कार्ड, डिफ़ॉल्ट रूप से एआई चश्मे की डिसप्ले की पूरी चौड़ाई में दिखते हैं. इन पर फ़ोकस किया जा सकता है. साथ ही, इन्हें क्लिक करने लायक भी बनाया जा सकता है.
कार्ड की बनावट और स्लॉट
Jetpack Compose Glimmer Card को कई खास एलिमेंट से बनाया जाता है. इससे आपको इसके कॉन्टेंट और लेआउट को पसंद के मुताबिक बनाने की सुविधा मिलती है.
हेडर: कार्ड का सबसे ऊपर वाला सेक्शन. इसे इमेज दिखाने के लिए डिज़ाइन किया गया है.
टाइटल और सबटाइटल: इन टेक्स्ट फ़ील्ड से, कार्ड के लिए मुख्य और सेकंडरी लेबल मिलते हैं.
लीडिंग आइकॉन: यह एक ऐसा आइकॉन होता है जो कार्ड के कॉन्टेंट एरिया की शुरुआत में दिखता है. हालांकि, इसे दिखाना ज़रूरी नहीं है.
ट्रेलिंग आइकॉन: यह एक ऐसा आइकॉन होता है जो कार्ड के कॉन्टेंट एरिया के आखिर में दिखता है. हालांकि, यह आइकॉन दिखाना ज़रूरी नहीं है.
ऐक्शन: यह मुख्य इंटरैक्टिव एलिमेंट के लिए एक स्लॉट होता है. जैसे, बटन. इससे लोगों को सीधे कार्ड से कार्रवाई करने की सुविधा मिलती है. यह स्लॉट, Card कंपोज़ेबल के अलग ओवरलोड पर उपलब्ध है.
मुख्य कॉन्टेंट: कार्ड का मुख्य हिस्सा, जहां आपको मुख्य टेक्स्ट या अन्य कॉन्टेंट रखना होता है.
सामान्य उदाहरण: सामान्य कार्ड बनाना
बहुत कम कोड का इस्तेमाल करके, एक सामान्य कार्ड बनाया जा सकता है:
Card { Text("This is a card") }
ज़्यादा जानकारी वाला उदाहरण: जटिल कार्ड दिखाना
यहां दिए गए कोड में, कार्ड बनाने के लिए एक साथ कई स्लॉट इस्तेमाल करने का तरीका बताया गया है. इसमें Card को TitleChip के साथ जोड़ने का तरीका भी बताया गया है.
@Composable
fun SampleGlimmerCard() {
val myHeaderImage = painterResource(id = R.drawable.header_image)
Column(horizontalAlignment = Alignment.CenterHorizontally) {
TitleChip { Text("Title Chip") }
Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
Card(
action = {
Button(onClick = {}) {
Text("Action Button")
}
},
header = {
Image(
painter = myHeaderImage,
contentDescription = "Header image for the card",
contentScale = ContentScale.FillWidth
)
},
title = { Text("Card Title") },
subtitle = { Text("Card Subtitle") },
leadingIcon = { FavoriteIcon, "Localized description" },
trailingIcon = { FavoriteIcon, "Localized description" }
) {
Text("A Jetpack Compose Glimmer Card using all available slots")
}
}
}
कोड के बारे में अहम जानकारी
- इसमें कार्ड के कॉन्टेंट और स्ट्रक्चर को पसंद के मुताबिक बनाने के लिए, कार्ड के अलग-अलग एलिमेंट इस्तेमाल करने का तरीका बताया गया है. जैसे,
header,title,subtitle,leadingIcon, औरaction. - इसमें
TitleChipको रखने औरSpacerका इस्तेमाल करने का तरीका बताया गया है.