Jetpack Compose Glimmer-এ, একটি Button হলো একটি ইন্টারেক্টিভ কম্পোনেন্ট যা ডিসপ্লে গ্লাসের ইনপুটের জন্য অপ্টিমাইজ করা হয়েছে এবং এটি এর স্টেটগুলোর মাধ্যমে স্পষ্ট ভিজ্যুয়াল ফিডব্যাক দিয়ে ব্যবহারকারীর কার্যকলাপকে পরিচালিত করে।
বাটনগুলো জেটপ্যাক কম্পোজ গ্লিমার সারফেস সিস্টেমের উপর ভিত্তি করে তৈরি, যা বর্ডার এবং ডেপথের মতো ফিজিক্যাল প্রোপার্টিগুলো স্বয়ংক্রিয়ভাবে পরিচালনা করে।
স্ট্যান্ডার্ড বাটনে একটি টেক্সট লেবেল এবং ঐচ্ছিক আইকন থাকে। আপনি এটি প্রাথমিক বা দ্বিতীয় পর্যায়ের কাজের জন্য ব্যবহার করতে পারেন। এছাড়াও বিশেষায়িত বাটন রয়েছে, যেমন আইকন বাটন এবং টগল বাটন , যেগুলোকে জেটপ্যাক কম্পোজ গ্লিমার-এ আলাদা কম্পোনেন্ট হিসেবে সংজ্ঞায়িত করা হয়েছে।
ডিফল্ট
বড়
শারীরস্থান
একটি বাটন একটি কন্টেইনার ও একটি লেবেল নিয়ে গঠিত, এবং এর শুরুতে ও শেষে ঐচ্ছিক আইকন থাকতে পারে।
| অংশ | বর্ণনা |
|---|---|
কন্টেইনার | বাটনটির পশ্চাৎ পৃষ্ঠতল। |
লেবেল | কাজটি বর্ণনা করে এমন লেখা। |
আইকন (ঐচ্ছিক) | অগ্রবর্তী বা পশ্চাৎবর্তী দৃশ্যমান নির্দেশক। |
আকার
জেটপ্যাক কম্পোজ গ্লিমার বাটন দুটি ভিন্ন আকারের ভ্যারিয়েন্ট সমর্থন করে। এগুলি বাটনের সর্বনিম্ন উচ্চতা এবং ভেতরের প্যাডিংকে প্রভাবিত করে।
| আকার | সর্বনিম্ন উচ্চতা | ডিফল্ট ব্যবহার |
|---|---|---|
মাঝারি | ৪৮.ডিপি | প্রমিত কার্যক্রম এবং তালিকা (ডিফল্ট)। |
বড় | ৭২.ডিপি | অত্যন্ত গুরুত্বপূর্ণ কার্যকলাপ বা স্ক্রিনের প্রধান প্রবেশপথ। |
রাজ্যগুলি
Jetpack Compose Glimmer-এর বাটনগুলো তাদের অবস্থা বোঝানোর জন্য চেহারা পরিবর্তন করে।
- সক্রিয় : একটি ইন্টারেক্টিভ বাটনের ডিফল্ট অবস্থা।
- ফোকাসড : ফোকাস করা হলে, বাটনটিতে
GlimmerTheme.depthEffectLevels.level1এবং একটি ফোকাসড বর্ডার হাইলাইট প্রয়োগ হয়। - চাপ দিলে : সক্রিয় করা হলে, পৃষ্ঠতলে একটি অর্ধস্বচ্ছ সাদা আস্তরণ প্রয়োগ করা হয়।
- নিষ্ক্রিয় : বোতামটি ইনপুটে সাড়া দেয় না এবং এর বাহ্যিক রূপ সামঞ্জস্য করা হয়েছে।
বোতামের ডিফল্ট
স্ট্যান্ডার্ড বাটনগুলির ক্ষেত্রে নিম্নলিখিত ডিফল্টগুলি প্রযোজ্য:
- ডিফল্টরূপে, বাটনগুলো
GlimmerTheme.typography.bodySmallব্যবহার করে। নিশ্চিত করুন যে বাটনের ভেতরের লেখা সংক্ষিপ্ত এবং কাজটি স্পষ্টভাবে বর্ণনা করে। - একটি বাটনের ডিফল্ট আকৃতি হলো
GlimmerTheme.shapes.large। এই সামঞ্জস্যপূর্ণ গোলাকার আকৃতি ব্যবহারকারীদের ডিসপ্লে গ্লাস ইন্টারফেস জুড়ে বাটনগুলো শনাক্ত করতে সাহায্য করে।
উদাহরণ: টেক্সট সহ বাটন
নিম্নলিখিত কোডটি টেক্সট সহ একটি স্ট্যান্ডার্ড বাটন তৈরি করে:
@Composable fun ButtonSample() { Button(onClick = {}) { Text("Send") } }
উদাহরণ: শুরুতে এবং শেষে আইকনযুক্ত বাটন
অতিরিক্ত প্রাসঙ্গিকতা প্রদানের জন্য আপনি লেখার শুরুতে ( leadingIcon ব্যবহার করে) বা শেষে ( trailingIcon ব্যবহার করে) আইকন যোগ করতে পারেন।
নিম্নলিখিত কোডটি একটি লিডিং আইকন সহ একটি বাটন তৈরি করে:
@Composable fun ButtonWithLeadingIconSample() { Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) { Text("Send") } }