Jetpack Compose Glimmer में आइकॉन बटन

एक्सआर डिवाइसों पर लागू होने वाली सुविधाएँ
इन दिशा-निर्देशों से आपको इस तरह के एक्सआर डिवाइसों के लिए अनुभव बनाने में मदद मिलती है.
XR डिवाइसों के टाइप के बारे में जानें →
डिसप्ले ग्लास
XR डिवाइसों के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, IconButton एक छोटा और इंटरैक्टिव कॉम्पोनेंट होता है. इसका इस्तेमाल, एक टैप से अन्य कार्रवाइयां दिखाने के लिए किया जाता है.

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

इस्तेमाल के अन्य उदाहरणों के लिए, स्टैंडर्ड बटन और टॉगल बटन भी उपलब्ध हैं.

Jetpack Compose Glimmer में, अलग-अलग स्टाइल वाले आइकॉन बटन का उदाहरण. इन उदाहरणों में, आइकॉन बटन की पांच स्थितियां दिखाई गई हैं: चालू (1), फ़ोकस किया गया (2), दबाया गया (3), बंद (4), बंद और फ़ोकस किया गया (5).

साइज़ और डाइमेंशन

एलिमेंट डाइमेंशन

कंटेनर का कम से कम साइज़

48 x 48 dp

इंटरनल आइकॉन का साइज़

32 x 32 डीपी

कॉन्टेंट के चारों ओर मौजूद डिफ़ॉल्ट पैडिंग

GlimmerTheme.componentSpacingValues.small

राज्य

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

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

आइकॉन बटन के डिफ़ॉल्ट

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

  • आकार: डिफ़ॉल्ट रूप से, यह GlimmerTheme.shapes.large (आम तौर पर गोल) पर सेट होता है.
  • कलर: डिफ़ॉल्ट रूप से GlimmerTheme.colors.surface पर सेट होता है.
  • कॉन्टेंट का रंग: अगर साफ़ तौर पर नहीं बताया गया है, तो यह बैकग्राउंड के रंग के हिसाब से अपने-आप तय होता है.
  • कॉन्टेंट पैडिंग: यह आइकॉन और कंटेनर के किनारे के बीच डिफ़ॉल्ट जगह उपलब्ध कराता है.
  • कम से कम साइज़: यह एक तय 48.dp वैल्यू होती है. इससे बटन इतने छोटे नहीं होते कि उनसे इंटरैक्ट न किया जा सके.
  • आइकॉन का साइज़: डिफ़ॉल्ट रूप से GlimmerTheme.iconSizes.small (32.dp) पर सेट होता है.

उदाहरण: आइकॉन बटन

नीचे दिया गया कोड, डिफ़ॉल्ट विशेषताओं वाला आइकॉन बटन बनाता है:

@Composable
fun IconButtonSample() {
    IconButton(onClick = { /* Handle action */ }) {
        Icon(FavoriteIcon, contentDescription = "Localized description")
    }
}