Jetpack Compose Glimmer-এ আইকন বোতাম

প্রযোজ্য XR ডিভাইস
এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।
XR ডিভাইসের ধরন সম্পর্কে জানুন →
Display Glasses
XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, IconButton হল একটি কম্প্যাক্ট, ইন্ট্যার‍্যাক্টিভ কম্পোনেন্ট যা একটি ট্যাপের মাধ্যমে অতিরিক্ত অ্যাকশন দেখানোর জন্য ব্যবহার করা হয়।

আইকন বোতামগুলি স্ট্যান্ডার্ড বোতামের চেয়ে ছোট দেখায়, তবে ডিসপ্লে গ্লাসে সহজে ইন্টার‍্যাক্ট করা যায় তা নিশ্চিত করতে এগুলি একটি ফিজিক্যাল সীমা বজায় রাখে।

অন্যান্য ব্যবহারের ক্ষেত্রে, স্ট্যান্ডার্ড বোতাম ও টগল বোতামও রয়েছে।

Jetpack Compose Glimmer-এ আইকন বোতামের কিছু আলাদা স্টাইলের উদাহরণ। এইসব উদাহরণে আইকন বোতামের পাঁচটি অবস্থা দেখানো হয়েছে: চালু (১), ফোকাস করা (২), প্রেস করা (৩), বন্ধ করা (৪), বন্ধ করা ও ফোকাস করা (৫)।

সাইজ ও ডাইমেনশন

এলিমেন্ট আকার

কন্টেনারের ন্যূনতম সাইজ

৪৮ x ৪৮ dp

ইন্টার্নাল আইকনের সাইজ

৩২ x ৩২ dp

ডিফল্ট কন্টেন্ট প্যাডিং

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")
    }
}