ফ্লোটিং অ্যাকশন বোতাম

ফ্লোটিং অ্যাকশন বোতাম (FAB) হল একটি হাই-এমফাসিস বোতাম যা ব্যবহারকারীকে কোনও অ্যাপ্লিকেশনে প্রাথমিক অ্যাকশন পারফর্ম করতে দেয়। এটি একটি একক, ফোকাসড অ্যাকশনকে প্রমোট করে যা ব্যবহারকারীর নেওয়া সবচেয়ে সাধারণ পাথওয়ে এবং সাধারণত স্ক্রিনের নিচের ডানদিকে অ্যাঙ্কর করা অবস্থায় দেখা যায়।

এইসব ক্ষেত্রে আপনি FAB ব্যবহার করতে পারেন:

• নতুন আইটেম তৈরি করা: নোট নেওয়ার অ্যাপে, নতুন নোট চটপট তৈরি করতে FAB ব্যবহার করা হতে পারে।
• নতুন পরিচিতি যোগ করা: চ্যাট অ্যাপে, FAB এমন একটি ইন্টারফেস খুলতে পারে যা ব্যবহারকারীকে কথোপথনে কাউকে যোগ করতে দেয়।
• লোকেশন সেন্টার করা: ম্যাপ ইন্টারফেসে, কোনও FAB ব্যবহারকারীর বর্তমান লোকেশনে ম্যাপ সেন্টার করতে পারে।

Material Design-এ চার ধরনের FAB আছে:

• FAB: সাধারণ সাইজের ফ্লোটিং অ্যাকশন বোতাম।
• ছোট FAB: ছোট ফ্লোটিং অ্যাকশন বোতাম।
• বড় FAB: একটি বড় ফ্লোটিং অ্যাকশন বোতাম।
• এক্সটেন্ডেড FAB: একটি ফ্লোটিং অ্যাকশন বোতাম যাতে শুধু আইকনের চেয়ে আরও বেশি কিছু থাকে।

API সারফেস

Material Design-এর সাথে সামঞ্জস্যপূর্ণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করার জন্য আপনি একাধিক কম্পোজ করার মতো আইটেম ব্যবহার করতে পারলেও, তাদের প্যারামিটার খুব বেশি আলাদা হয় না। আপনাকে যেসব গুরুত্বপূর্ণ প্যারামিটার মনে রাখতে হবে, তার মধ্যে নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত:

• onClick: ব্যবহারকারী বোতাম প্রেস করলে যে ফাংশন কল করা হয়।
• containerColor: বোতামের রঙ।
• contentColor: আইকনের রঙ।

ফ্লোটিং অ্যাকশন বোতাম

সাধারণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, basic FloatingActionButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। নিম্নলিখিত উদাহরণে FAB-এর প্রাথমিক প্রয়োগ দেখানো হয়েছে:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

ছোট বোতাম

ছোট ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, SmallFloatingActionButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। কাস্টম রঙ যোগ করে কীভাবে এটি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হয়েছে।

@Composable
fun SmallExample(onClick: () -> Unit) {
    SmallFloatingActionButton(
        onClick = { onClick() },
        containerColor = MaterialTheme.colorScheme.secondaryContainer,
        contentColor = MaterialTheme.colorScheme.secondary
    ) {
        Icon(Icons.Filled.Add, "Small floating action button.")
    }
}
FloatingActionButton.kt

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

বড় বোতাম

বড় ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, LargeFloatingActionButton কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। এই কম্পোজ করার উপযুক্ত আইটেমটি অন্যান্য উদাহরণ থেকে খুব বেশি আলাদা নয়, শুধু এটি বড় বোতাম তৈরি করে।

নিচে বড় FAB-এর একটি সহজবোধ্য প্রয়োগ দেখানো হল।

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

এক্সটেন্ডেড বোতাম

আপনি ExtendedFloatingActionButton কম্পোজ করার উপযুক্ত আইটেমের সাহায্যে আরও জটিল ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে পারবেন। FloatingActionButton-এর সাথে এর মূল পার্থক্য হল, এতে নির্দিষ্ট icon ও text প্যারামিটার আছে। এগুলি আপনাকে আরও জটিল কন্টেন্ট সহ একটি বোতাম তৈরি করতে দেয় যা এর কন্টেন্টকে যথাযথভাবে ফিট করার জন্য স্কেল করে।

নিচে দেওয়া স্নিপেট থেকে কীভাবে ExtendedFloatingActionButton প্রয়োগ করতে হয় তা জানতে পারবেন। এখানে icon ও text-এর জন্য উদাহরণস্বরূপ মান দেওয়া হয়েছে।

@Composable
fun ExtendedExample(onClick: () -> Unit) {
    ExtendedFloatingActionButton(
        onClick = { onClick() },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Extended FAB") },
    )
}
FloatingActionButton.kt

এই প্রয়োগটি নিম্নলিখিতভাবে দেখা যায়:

অতিরিক্ত রিসোর্স

• সাধারণ বোতাম
• Material UI ডকুমেন্টেশন