Button
বোতামগুলি হল মৌলিক উপাদান যা ব্যবহারকারীকে একটি সংজ্ঞায়িত ক্রিয়া ট্রিগার করতে দেয়। পাঁচ ধরনের বোতাম রয়েছে। নিচের সারণীটি পাঁচটি বোতামের প্রকারের প্রতিটির উপস্থিতি বর্ণনা করে, সেইসাথে আপনার সেগুলি কোথায় ব্যবহার করা উচিত।
টাইপ | চেহারা | উদ্দেশ্য |
---|---|---|
ভরা | বিপরীত পাঠ্য সহ কঠিন পটভূমি। | উচ্চ জোর বোতাম. এগুলি একটি অ্যাপ্লিকেশনের প্রাথমিক ক্রিয়াগুলির জন্য, যেমন "জমা দিন" এবং "সংরক্ষণ করুন।" ছায়ার প্রভাব বোতামের গুরুত্বের উপর জোর দেয়। |
ভরা টোনাল | পৃষ্ঠের সাথে মেলে পটভূমির রঙ পরিবর্তিত হয়। | এছাড়াও প্রাথমিক বা উল্লেখযোগ্য কর্মের জন্য। ভরা বোতামগুলি আরও চাক্ষুষ ওজন এবং স্যুট ফাংশন প্রদান করে যেমন "কার্টে যোগ করুন" এবং "সাইন ইন করুন।" |
উন্নীত | ছায়া পেয়ে দাঁড়িয়েছে। | টোনাল বোতামগুলির অনুরূপ ভূমিকা ফিট করে। বোতামটিকে আরও স্পষ্টভাবে দেখাতে উচ্চতা বাড়ান। |
রূপরেখা | কোন ফিল ছাড়া একটি সীমানা বৈশিষ্ট্য. | মাঝারি-জোরা বোতাম, যেখানে গুরুত্বপূর্ণ কিন্তু প্রাথমিক নয় এমন ক্রিয়া রয়েছে। "বাতিল" বা "ব্যাক" এর মত বিকল্প, সেকেন্ডারি ক্রিয়াগুলি নির্দেশ করতে তারা অন্যান্য বোতামগুলির সাথে ভালভাবে জোড়া দেয়। |
পাঠ্য | কোনো ব্যাকগ্রাউন্ড বা সীমানা ছাড়াই পাঠ্য প্রদর্শন করে। | কম-জোর দেওয়া বোতাম, নেভিগেশনাল লিঙ্কের মতো কম গুরুত্বপূর্ণ অ্যাকশন বা "আরো জানুন" বা "বিশদ দেখুন" এর মতো সেকেন্ডারি ফাংশনের জন্য আদর্শ। |
নিম্নলিখিত চিত্রটি ম্যাটেরিয়াল ডিজাইনে পাঁচ ধরনের বোতাম প্রদর্শন করে।
API পৃষ্ঠ
-
onClick
: ব্যবহারকারী বোতাম টিপে যখন ফাংশন বলা হয়। -
enabled
: মিথ্যা হলে, এই প্যারামিটারটি বোতামটিকে অনুপলব্ধ এবং নিষ্ক্রিয় দেখায়। -
colors
:ButtonColors
একটি উদাহরণ যা বোতামে ব্যবহৃত রং নির্ধারণ করে। -
contentPadding
: বোতামের মধ্যে প্যাডিং।
ভরা বোতাম
ভরা বোতাম উপাদান মৌলিক Button
কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি কঠিন রঙ দিয়ে ভরা হয়। নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![বেগুনি ব্যাকগ্রাউন্ড সহ একটি ভরা বোতাম যাতে লেখা হয়, 'ভরা'।](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=4&hl=bn)
ভরা টোনাল বোতাম
ভরা টোনাল বোতাম উপাদানটি FilledTonalButton
কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি টোনাল রঙ দিয়ে ভরা হয়।
নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![একটি হালকা বেগুনি ব্যাকগ্রাউন্ড সহ একটি টোনাল বোতাম যাতে লেখা হয়, 'ভরা'৷](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=4&hl=bn)
রূপরেখাযুক্ত বোতাম
আউটলাইন করা বোতাম কম্পোনেন্ট OutlinedButton
কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি রূপরেখা সহ প্রদর্শিত হয়।
নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![একটি অন্ধকার সীমানা সহ একটি স্বচ্ছ আউটলাইন করা বোতাম যা লেখা আছে, 'আউটলাইনড'৷](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=4&hl=bn)
এলিভেটেড বোতাম
এলিভেটেড বোতাম কম্পোনেন্ট ElevatedButton
বাটন কম্পোজেবল ব্যবহার করে। এটির একটি ছায়া রয়েছে যা ডিফল্টরূপে উচ্চতার প্রভাবকে উপস্থাপন করে। মনে রাখবেন যে এটি মূলত একটি ছায়া সহ একটি রূপরেখাযুক্ত বোতাম।
নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![একটি ধূসর পটভূমি সহ একটি উন্নত বোতাম যা লেখা আছে, 'উন্নত'।](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=4&hl=bn)
পাঠ্য বোতাম
টেক্সট বোতাম কম্পোনেন্ট TextButton
কম্পোজেবল ব্যবহার করে। চাপা না হওয়া পর্যন্ত, এটি শুধুমাত্র পাঠ্য হিসাবে প্রদর্শিত হবে। এটি ডিফল্টরূপে একটি কঠিন পূরণ বা রূপরেখা নেই।
নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:
![একটি পাঠ্য বোতাম যা 'টেক্সট বোতাম' পড়ে](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=4&hl=bn)