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

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

এই তিনটি ব্যবহারের উদাহরণ বিবেচনা করুন যেখানে আপনি FAB ব্যবহার করতে পারেন:

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

মেটেরিয়াল ডিজাইনে চার ধরনের FAB আছে:

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

API সারফেস

যদিও আপনি মেটেরিয়াল ডিজাইনের সাথে সামঞ্জস্যপূর্ণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে বেশ কয়েকটি কম্পোজেবল ব্যবহার করতে পারেন, তবে তাদের প্যারামিটারগুলি খুব বেশি আলাদা নয়। আপনাকে যেসব মূল প্যারামিটার মনে রাখতে হবে সেগুলি নিচে উল্লেখ করা হল:

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

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

সাধারণ ফ্লোটিং অ্যাকশন বোতাম তৈরি করতে, বেসিক 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 ডকুমেন্ট