Jetpack Compose Glimmer में बटन

एक्सआर डिवाइसों पर लागू होने वाली सुविधाएँ

इन दिशा-निर्देशों से आपको इस तरह के एक्सआर डिवाइसों के लिए अनुभव बनाने में मदद मिलती है.

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 होता है. इस तरह के एक जैसे कॉर्नर से, लोगों को डिसप्ले ग्लास के इंटरफ़ेस पर मौजूद बटन पहचानने में मदद मिलती है.

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

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

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

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

बटन ग्रुप

ButtonGroup कंपोज़ेबल की मदद से, बटन को स्क्रोल की जा सकने वाली लाइन में ग्रुप किया जा सकता है. यह फ़ोकस कंट्रोलर के तौर पर काम करता है. उपयोगकर्ता के स्क्रोल करने पर, फ़ोकस अपने-आप उस बटन पर चला जाता है जो स्क्रोल की मौजूदा जगह के हिसाब से होता है.

उदाहरण: बटन ग्रुप

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

बटन ग्रुप में फ़ोकस कंट्रोल

ग्रुप में मौजूद किसी भी बटन पर फ़ोकस ले जाकर, मैन्युअल तरीके से सिलेक्शन को कंट्रोल किया जा सकता है.

ButtonGroup स्टेट का इस्तेमाल करके, स्क्रोल करने के तरीके को पसंद के मुताबिक बनाएं और कंट्रोल करें:

1. rememberButtonGroupState का इस्तेमाल करके, राज्य का नाम बताएं.
2. इसे ButtonGroup कंपोज़ेबल को पास करें.
3. किसी आइटम पर स्क्रोल करने और उस पर अपने-आप फ़ोकस करने के लिए, animateScrollToItem (या तुरंत स्क्रोल करने के लिए scrollToItem) को कॉल करें.

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

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt