Jetpack Compose Glimmer में बटन

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

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

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

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

Jetpack Compose Glimmer में, एक Button एक इंटरैक्टिव कॉम्पोनेंट है. इसे डिसप्ले ग्लास के इनपुट के लिए ऑप्टिमाइज़ किया गया है. यह उपयोगकर्ता की कार्रवाइयों को गाइड करने के लिए, अपनी स्थितियों के ज़रिए साफ़ तौर पर विज़ुअल फ़ीडबैक देता है.

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

स्टैंडर्ड बटन में, टेक्स्ट लेबल और आइकॉन शामिल होते हैं. आइकॉन ज़रूरी नहीं हैं. इसका इस्तेमाल, प्राइमरी या सेकंडरी ऐक्शन के लिए किया जा सकता है. खास बटन भी होते हैं. जैसे, आइकॉन बटन और टॉगल बटन. इन्हें Jetpack Compose Glimmer में अलग-अलग कॉम्पोनेंट के तौर पर तय किया जाता है.

डिफ़ॉल्ट

बड़ा

शरीर-रचना विज्ञान

बटन में एक कंटेनर और एक लेबल होता है. इसमें शुरू और आखिर में आइकॉन जोड़े जा सकते हैं. हालांकि, यह ज़रूरी नहीं है.

आकार

Jetpack Compose Glimmer में बटन के दो साइज़ वैरिएंट इस्तेमाल किए जा सकते हैं. इनसे, बटन की कम से कम ऊंचाई और इंटरनल पैडिंग पर असर पड़ता है.

राज्य

Jetpack Compose Glimmer में बटन, अपनी स्थिति के बारे में बताने के लिए, अपनी दिखावट बदलते हैं.

• चालू: यह इंटरैक्टिव बटन की डिफ़ॉल्ट स्थिति है.
• फ़ोकस में: फ़ोकस में होने पर, बटन पर GlimmerTheme.depthEffectLevels.level1 और फ़ोकस किया गया बॉर्डर हाइलाइट लागू होता है.
• दबाया गया: चालू होने पर, सर्फ़ेस पर सेमी-ट्रांसपैरंट सफ़ेद ओवरले लागू होता है.
• बंद: बटन, इनपुट का जवाब नहीं देता और उसकी दिखावट में बदलाव किया जाता है.

बटन की डिफ़ॉल्ट सेटिंग

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

• डिफ़ॉल्ट रूप से, बटन GlimmerTheme.typography.bodySmall का इस्तेमाल करते हैं. पक्का करें कि बटन में मौजूद टेक्स्ट छोटा हो और वह ऐक्शन के बारे में साफ़ तौर पर बताता हो.
• बटन के लिए डिफ़ॉल्ट आकार, GlimmerTheme.shapes.large होता है. लगातार राउंडिंग की वजह से, उपयोगकर्ताओं को डिसप्ले ग्लास इंटरफ़ेस पर बटन पहचानने में मदद मिलती है.

उदाहरण: टेक्स्ट वाला बटन

नीचे दिया गया कोड, टेक्स्ट वाला एक स्टैंडर्ड बटन बनाता है:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

उदाहरण: शुरू और आखिर में आइकॉन वाले बटन

अतिरिक्त कॉन्टेक्स्ट देने के लिए, टेक्स्ट की शुरुआत में (leadingIcon का इस्तेमाल करके) या आखिर में (trailingIcon का इस्तेमाल करके) आइकॉन भी जोड़े जा सकते हैं.

नीचे दिया गया कोड, शुरू में आइकॉन वाला एक बटन बनाता है:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt