বোতাম হল মৌলিক কম্পোনেন্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট অ্যাকশন ট্রিগার করার অনুমতি দেয়। পাঁচ ধরনের বোতাম আছে। এই সারণীতে পাঁচটি বোতামের প্রত্যেকটির আকার-আকৃতি এবং সেগুলি কোথায় ব্যবহার করা উচিত তার বিবরণ দেওয়া আছে:
| ধরন | কেমন দেখাবে | উদ্দেশ্য |
|---|---|---|
| ভর্তি করা হয়েছে | কনট্রাস্ট টেক্সট সহ সলিড ব্যাকগ্রাউন্ড। | হাই-এমফাসিস বোতাম। এগুলি হল কোনও অ্যাপ্লিকেশনের প্রাথমিক অ্যাকশন, যেমন "জমা দিন" ও "সেভ করুন"। ছায়া এফেক্ট বোতামের গুরুত্ব হাইলাইট করে। |
| ভরাট টোনাল | সারফেসের সাথে ম্যাচ করার জন্য ব্যাকগ্রাউন্ডের রঙ আলাদা আলাদা হয়। | এছাড়াও, প্রাথমিক বা গুরুত্বপূর্ণ অ্যাকশনের জন্য। ফিল করা টোনাল বোতামগুলি আরও বেশি ভিজ্যুয়াল ওয়েট প্রদান করে এবং "কার্টে যোগ করুন" ও "সাইন-ইন করুন"-এর মতো ফাংশনের জন্য উপযুক্ত। |
| স্বাভাবিকের বেশি | ছায়া থাকার কারণে আলাদা করে চোখে পড়ছে। | টোনাল বোতামের মতো একই উদ্দেশ্যে কাজ করে। বোতামটি আরও বেশি স্পষ্টভাবে দেখাতে উচ্চতা বাড়ান। |
| আউটলাইনযুক্ত | কোনও ফিল ছাড়াই বর্ডার থাকে। | মাঝারি গুরুত্বের বোতাম, এতে এমন অ্যাকশন থাকে যা গুরুত্বপূর্ণ হলেও প্রাথমিক নয়। এগুলি অন্যান্য বোতামের সাথে ভালভাবে পেয়ার করে বিকল্প, সেকেন্ডারি অ্যাকশন যেমন "বাতিল করুন" বা "ফিরে যান" নির্দেশ করে। |
| টেক্সট | কোনও ব্যাকগ্রাউন্ড বা বর্ডার ছাড়াই টেক্সট দেখায়। | কম গুরুত্ব দেওয়া বোতাম, এগুলি কম গুরুত্বপূর্ণ অ্যাকশনের জন্য আদর্শ, যেমন নেভিগেশনাল লিঙ্ক বা "আরও জানুন" বা "বিস্তারিত দেখুন"-এর মতো গৌণ ফাংশন। |
এই ছবিতে Material Design-এর পাঁচ ধরনের বোতাম দেখানো হয়েছে:
API সারফেস
onClick- ব্যবহারকারী বোতাম প্রেস করলে সিস্টেম যে ফাংশন কল করে।
enabled- যখন
false, এই প্যারামিটার বোতামটিকে উপলভ্য নয় এবং ইনঅ্যাক্টিভ হিসেবে দেখায়। colors- বোতামে ব্যবহৃত রঙ নির্ধারণ করে এমন
ButtonColors-এর একটি ইনস্ট্যান্স। contentPadding- বোতামের মধ্যে প্যাডিং।
ভরাট করা বোতাম
ফিল করা বোতাম কম্পোনেন্ট, সাধারণ Button কম্পোজ করার উপযুক্ত এলিমেন্ট ব্যবহার করে। এটি ডিফল্ট হিসেবে
সলিড রঙ দিয়ে ভরাট করা থাকে। স্নিপেটে দেখানো হয়েছে কীভাবে
কম্পোনেন্ট প্রয়োগ করতে হয়:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
এই প্রয়োগটি যেভাবে দেখানো হয়েছে:
ফিল্ড টোনাল বোতাম
ফিল করা টোনাল বোতাম কম্পোনেন্ট FilledTonalButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করে।
এটি ডিফল্ট হিসেবে টোনাল কালার দিয়ে পূরণ করা হয়।
কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় তা স্নিপেটে দেখানো হয়েছে:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
এই প্রয়োগটি যেভাবে দেখানো হয়েছে:
আউটলাইন করা বোতাম
আউটলাইন করা বোতাম কম্পোনেন্ট OutlinedButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করে। এটি
ডিফল্ট হিসেবে আউটলাইন সহ দেখা যায়।
কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় তা স্নিপেটে দেখানো হয়েছে:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
এই প্রয়োগটি যেভাবে দেখানো হয়েছে:
উন্নত বোতাম
'উন্নত বোতাম' কম্পোনেন্ট ElevatedButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করে। এতে
একটি শ্যাডো আছে যা ডিফল্ট হিসেবে উচ্চতা সংক্রান্ত এফেক্ট দেখায়। এটি একটি ফিল করা বোতাম
যার মধ্যে একটি শ্যাডো অন্তর্ভুক্ত।
কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় তা স্নিপেটে দেখানো হয়েছে:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
এই প্রয়োগটি যেভাবে দেখানো হয়েছে:
টেক্সট বোতাম
টেক্সট বোতাম কম্পোনেন্ট TextButton কম্পোজেবল ব্যবহার করে। এটি প্রেস না করা পর্যন্ত
শুধুমাত্র টেক্সট হিসেবে দেখা যায়। এতে ডিফল্ট হিসেবে কোনও সলিড ফিল বা আউটলাইন থাকে না।
কম্পোনেন্ট কীভাবে প্রয়োগ করতে হয় তা স্নিপেটে দেখানো হয়েছে:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
এই প্রয়োগটি যেভাবে দেখানো হয়েছে:
