Jetpack Compose Glimmer में टाइटल चिप

XR डिवाइस, जिन पर यह सुविधा काम करती है

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

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

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

Jetpack Compose Glimmer में, TitleChip कॉम्पोनेंट एक नॉन-इंटरैक्टिव कॉम्पोनेंट है. यह कॉम्पोनेंट, Card या VerticalList जैसे जुड़े हुए कॉन्टेंट के लिए, संक्षिप्त कॉन्टेक्स्ट या लेबलिंग उपलब्ध कराता है.

टाइटल चिप का इस्तेमाल, संक्षिप्त जानकारी के लिए करें. जैसे, छोटा टाइटल, कैटगरी का नाम या स्टेटस इंडिकेटर. आम तौर पर, आपको टाइटल चिप को उस कॉन्टेंट के ऊपर रखना चाहिए जिसके बारे में वह जानकारी देता है, ताकि स्ट्रक्चरल रिलेशनशिप साफ़ तौर पर दिखे.

सामान्य उदाहरण: छोटा टाइटल चिप बनाना

यहां दिया गया कोड, सामान्य टाइटल चिप बनाता है:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}
TitleChipSample.kt

सामान्य उदाहरण: आइकॉन वाला टाइटल चिप बनाना

यहां दिया गया कोड, आइकॉन वाला टाइटल चिप बनाता है:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}
TitleChipSample.kt

उदाहरण: कार्ड वाला टाइटल चिप बनाना

किसी दूसरे कॉम्पोनेंट के साथ टाइटल चिप का इस्तेमाल करने के लिए, कंपोज़ेबल में टाइटल चिप TitleChipDefaults.associatedContentSpacing को दूसरे कॉम्पोनेंट के ऊपर रखें. यहां दिया गया कोड, कार्ड वाला टाइटल चिप बनाता है:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}
TitleChipSample.kt

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

• टाइटल चिप को बीच में अलाइन किया जाता है. आम तौर पर, कार्ड के ऊपर रखे गए टाइटल चिप को इसी तरह अलाइन किया जाता है.
• Spacer की ऊंचाई तय होती है, ताकि दोनों कॉम्पोनेंट के बीच सही वर्टिकल स्पेसिंग दी जा सके. इसे TitleChipDefaults.associatedContentSpacing का इस्तेमाल करके तय किया जाता है.
• टेक्स्ट कॉन्टेंट से पहले, विज़ुअल कॉन्टेक्स्ट जोड़ने के लिए, leadingIcon का इस्तेमाल किया जाता है. यह ज़रूरी नहीं है.
• टाइटल चिप, अपने टेक्स्ट के लिए caption स्टाइल का इस्तेमाल अपने-आप करता है.
• टाइटल चिप से इंटरैक्ट नहीं किया जा सकता. अगर आपको क्लिक किया जा सकने वाला लेबल चाहिए, तो a Button या किसी दूसरे इंटरैक्टिव कॉम्पोनेंट का इस्तेमाल करें.