ট্যাবসমূহ

ট্যাব আপনাকে সম্পর্কিত কন্টেন্টের গ্রুপ সাজাতে সাহায্য করে। দু'ধরনের ট্যাব আছে:

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

এই পৃষ্ঠায় দেখানো হয়েছে যে কীভাবে আপনার অ্যাপে সম্পর্কিত স্ক্রিন ও প্রাথমিক নেভিগেশন সহ প্রাথমিক ট্যাব দেখাতে হয়।

API সারফেস

ট্যাব প্রয়োগ করতে Tab, PrimaryTabRow ও SecondaryTabRow কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করুন। Tab কম্পোজ করার উপযুক্ত আইটেমটি সারিটির মধ্যে একটি স্বতন্ত্র ট্যাবকে উপস্থাপন করে এবং সাধারণত PrimaryTabRow (প্রাইমারি ইন্ডিকেটর ট্যাবের জন্য) বা SecondaryTabRow (সেকেন্ডারি ইন্ডিকেটর ট্যাবের জন্য)-এর মধ্যে ব্যবহার করা হয়।

Tab-এর মধ্যে নিম্নলিখিত মূল প্যারামিটার রয়েছে:

• selected: বর্তমান ট্যাবটি দৃশ্যত হাইলাইট করা হয়েছে কিনা তা নির্ধারণ করে।
• onClick(): একটি প্রয়োজনীয় ল্যাম্বডা ফাংশন যা ব্যবহারকারী ট্যাবে ক্লিক করলে সম্পন্ন করতে হবে এমন অ্যাকশনকে সংজ্ঞায়িত করে। এখানে আপনি সাধারণত নেভিগেশন ইভেন্ট ম্যানেজ করেন, বেছে নেওয়া ট্যাব স্টেট আপডেট করেন অথবা সংশ্লিষ্ট কন্টেন্ট লোড করেন।
• text: ট্যাবের মধ্যে টেক্সট দেখায়। ঐচ্ছিক।
• icon: ট্যাবের মধ্যে একটি আইকন দেখায়। ঐচ্ছিক।
• enabled: ট্যাব চালু করা হবে কিনা এবং সেটির সাথে ইন্টার‍্যাক্ট করা যাবে কিনা তা নিয়ন্ত্রণ করে। false হিসেবে সেট করা থাকলে, ট্যাবটি বন্ধ করা অবস্থায় দেখা যাবে এবং ক্লিক করলে কোনও প্রতিক্রিয়া পাওয়া যাবে না।

উদাহরণ: ট্যাব-ভিত্তিক নেভিগেশন

নিচের স্নিপেটটি অ্যাপের বিভিন্ন স্ক্রিনের মধ্যে নেভিগেট করার জন্য ট্যাব সহ একটি টপ নেভিগেশন বার ইমপ্লিমেন্ট করে:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

Key points

• PrimaryTabRow ট্যাবের একটি অনুভূমিক সারি দেখায়, প্রতিটি ট্যাব একটি Destination-এর সাথে সম্পর্কিত।
• val navController = rememberNavController(), NavHostController-এর একটি ইনস্ট্যান্স তৈরি করে ও মনে রাখে, যা NavHost-এর মধ্যে নেভিগেশন ম্যানেজ করে।
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } বেছে নেওয়া ট্যাবের স্ট্যাটাস ম্যানেজ করে।
  • startDestination.ordinal enum এন্ট্রির সংখ্যাসূচক ইন্ডেক্স (পজিশন) পায়। Destination.SONGS
• আপনি কোনও ট্যাবে ক্লিক করলে, সংশ্লিষ্ট স্ক্রিনে নেভিগেট করতে onClick ল্যাম্বডা কল navController.navigate(route = destination.route) করা হয়।
• Tab-এর onClick ল্যাম্বডা selectedDestination স্টেটকে আপডেট করে ক্লিক করা ট্যাবটি দৃশ্যত হাইলাইট করে।
• এটি AppNavHost কম্পোজ করার উপযুক্ত, navController এবং startDestination কল করে, যাতে বেছে নেওয়া স্ক্রিনের আসল কন্টেন্ট দেখানো যায়।

ফলাফল

নিচের ছবিতে আগের স্নিপেটের ফলাফল দেখানো হয়েছে:

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

• Material 3 - ট্যাব
• Compose-এর মাধ্যমে নেভিগেশন