বোতাম

কীওয়ার্ড: AiAssisted, পণ্য: JetpackCompose

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

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

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

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

API পৃষ্ঠ

onClick

ব্যবহারকারী বোতাম টিপলে সিস্টেমটি যে ফাংশনটি কল করে।

enabled

false হলে, এই প্যারামিটারটি বোতামটিকে অনুপলব্ধ এবং নিষ্ক্রিয় দেখায়।

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. একটি পাঠ্য বোতাম।

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

• ফ্লোটিং অ্যাকশন বোতাম
• মেটেরিয়াল ডিজাইন 3 বোতাম ওভারভিউ