Button

বোতামগুলি হল মৌলিক উপাদান যা ব্যবহারকারীকে একটি সংজ্ঞায়িত ক্রিয়া ট্রিগার করতে দেয়। পাঁচ ধরনের বোতাম রয়েছে। নিচের সারণীটি পাঁচটি বোতামের প্রকারের প্রতিটির উপস্থিতি বর্ণনা করে, সেইসাথে আপনার সেগুলি কোথায় ব্যবহার করা উচিত।

টাইপ	চেহারা	উদ্দেশ্য
ভরা	বিপরীত পাঠ্য সহ কঠিন পটভূমি।	উচ্চ জোর বোতাম. এগুলি একটি অ্যাপ্লিকেশনের প্রাথমিক ক্রিয়াগুলির জন্য, যেমন "জমা দিন" এবং "সংরক্ষণ করুন।" ছায়ার প্রভাব বোতামের গুরুত্বের উপর জোর দেয়।
ভরা টোনাল	পৃষ্ঠের সাথে মেলে পটভূমির রঙ পরিবর্তিত হয়।	এছাড়াও প্রাথমিক বা উল্লেখযোগ্য কর্মের জন্য। ভরা বোতামগুলি আরও চাক্ষুষ ওজন এবং স্যুট ফাংশন প্রদান করে যেমন "কার্টে যোগ করুন" এবং "সাইন ইন করুন।"
উন্নীত	ছায়া পেয়ে দাঁড়িয়েছে।	টোনাল বোতামগুলির অনুরূপ ভূমিকা ফিট করে। বোতামটিকে আরও স্পষ্টভাবে দেখাতে উচ্চতা বাড়ান।
রূপরেখা	কোন ফিল ছাড়া একটি সীমানা বৈশিষ্ট্য.	মাঝারি-জোরা বোতাম, যেখানে গুরুত্বপূর্ণ কিন্তু প্রাথমিক নয় এমন ক্রিয়া রয়েছে। "বাতিল" বা "ব্যাক" এর মত বিকল্প, সেকেন্ডারি ক্রিয়াগুলি নির্দেশ করতে তারা অন্যান্য বোতামগুলির সাথে ভালভাবে জোড়া দেয়।
পাঠ্য	কোনো ব্যাকগ্রাউন্ড বা সীমানা ছাড়াই পাঠ্য প্রদর্শন করে।	কম-জোর দেওয়া বোতাম, নেভিগেশনাল লিঙ্কের মতো কম গুরুত্বপূর্ণ অ্যাকশন বা "আরো জানুন" বা "বিশদ দেখুন" এর মতো সেকেন্ডারি ফাংশনের জন্য আদর্শ।

নিম্নলিখিত চিত্রটি ম্যাটেরিয়াল ডিজাইনে পাঁচ ধরনের বোতাম প্রদর্শন করে।

চিত্র 1. পাঁচটি বোতাম উপাদান।

API পৃষ্ঠ

• onClick : ব্যবহারকারী বোতাম টিপে যখন ফাংশন বলা হয়।
• enabled : মিথ্যা হলে, এই প্যারামিটারটি বোতামটিকে অনুপলব্ধ এবং নিষ্ক্রিয় দেখায়।
• colors : ButtonColors একটি উদাহরণ যা বোতামে ব্যবহৃত রং নির্ধারণ করে।
• contentPadding : বোতামের মধ্যে প্যাডিং।

ভরা বোতাম

ভরা বোতাম উপাদান মৌলিক Button কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি কঠিন রঙ দিয়ে ভরা হয়। নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

দ্রষ্টব্য: আপনি যদি একটি কাস্টম বোতাম তৈরি করতে চান তবে কম্পোজযোগ্য Button ব্যবহার করুন।

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 2. একটি ভরাট বোতাম।

ভরা টোনাল বোতাম

ভরা টোনাল বোতাম উপাদানটি FilledTonalButton কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি টোনাল রঙ দিয়ে ভরা হয়।

নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 3. একটি টোনাল বোতাম।

রূপরেখাযুক্ত বোতাম

আউটলাইন করা বোতাম কম্পোনেন্ট OutlinedButton কম্পোজেবল ব্যবহার করে। এটি ডিফল্টরূপে একটি রূপরেখা সহ প্রদর্শিত হয়।

নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 4. একটি রূপরেখাযুক্ত বোতাম।

এলিভেটেড বোতাম

এলিভেটেড বোতাম কম্পোনেন্ট ElevatedButton বাটন কম্পোজেবল ব্যবহার করে। এটির একটি ছায়া রয়েছে যা ডিফল্টরূপে উচ্চতার প্রভাবকে উপস্থাপন করে। মনে রাখবেন যে এটি মূলত একটি ছায়া সহ একটি রূপরেখাযুক্ত বোতাম।

নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 5. একটি উন্নত বোতাম।

পাঠ্য বোতাম

টেক্সট বোতাম কম্পোনেন্ট TextButton কম্পোজেবল ব্যবহার করে। চাপা না হওয়া পর্যন্ত, এটি শুধুমাত্র পাঠ্য হিসাবে প্রদর্শিত হবে। এটি ডিফল্টরূপে একটি কঠিন পূরণ বা রূপরেখা নেই।

নিম্নলিখিত স্নিপেটটি দেখায় কিভাবে উপাদানটি বাস্তবায়ন করতে হয়:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

এই বাস্তবায়ন নিম্নলিখিত হিসাবে প্রদর্শিত হবে:

চিত্র 6. একটি পাঠ্য বোতাম।

অতিরিক্ত সম্পদ

• ফ্লোটিং অ্যাকশন বোতাম
• উপাদান UI ডক্স