Button

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

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

API পৃষ্ঠ

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

ভরা বোতাম

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

পাঠ্য বোতাম

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

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

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

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

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

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