Jetpack Compose Glimmer-এর আইকন বাটন

প্রযোজ্য এক্সআর ডিভাইস
এই নির্দেশিকা আপনাকে এই ধরনের এক্সআর ডিভাইসগুলির জন্য অভিজ্ঞতা তৈরি করতে সাহায্য করে।
ডিসপ্লে গ্লাস

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

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

অন্যান্য ব্যবহারের জন্য সাধারণ বাটন এবং টগল বাটনও রয়েছে।

Jetpack Compose Glimmer-এ আইকন বাটনের কিছু ভিন্ন শৈলীর উদাহরণ। এই উদাহরণগুলিতে পাঁচটি আইকন বাটনের অবস্থা দেখানো হয়েছে: সক্রিয় (1), ফোকাসড (2), চাপা (3), নিষ্ক্রিয় (4), নিষ্ক্রিয় এবং ফোকাসড (5)।

আকার এবং মাত্রা

উপাদান মাত্রা

সর্বনিম্ন কন্টেইনারের আকার

৪৮ x ৪৮ ডিপি

অভ্যন্তরীণ আইকনের আকার

৩২ x ৩২ ডিপি

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

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 = {}) { Icon(FavoriteIcon, "Localized description") }
}