टैब

टैब की मदद से, एक जैसे कॉन्टेंट को ग्रुप में व्यवस्थित किया जा सकता है. टैब दो तरह के होते हैं:

• प्राइमरी टैब: इन्हें टॉप ऐप्लिकेशन बार के नीचे, कॉन्टेंट पैन के सबसे ऊपर रखा जाता है. इनसे मुख्य कॉन्टेंट डेस्टिनेशन दिखते हैं. इनका इस्तेमाल तब किया जाना चाहिए, जब सिर्फ़ एक सेट टैब की ज़रूरत हो.
• सेकंडरी टैब: इनका इस्तेमाल कॉन्टेंट वाले सेक्शन में किया जाता है. इससे मिलते-जुलते कॉन्टेंट को अलग-अलग किया जा सकता है और उन्हें क्रम से लगाया जा सकता है. इनकी ज़रूरत तब पड़ती है, जब किसी स्क्रीन पर एक से ज़्यादा लेवल के टैब की ज़रूरत होती है.

इस पेज पर, आपके ऐप्लिकेशन में प्राइमरी टैब दिखाने का तरीका बताया गया है. साथ ही, इससे जुड़ी स्क्रीन और बुनियादी नेविगेशन के बारे में भी बताया गया है.

एपीआई सरफ़ेस

टैब लागू करने के लिए, Tab, PrimaryTabRow, और SecondaryTabRow कंपोज़ेबल का इस्तेमाल करें. Tab कंपोज़ेबल, लाइन में मौजूद किसी टैब को दिखाता है. इसका इस्तेमाल आम तौर पर, PrimaryTabRow (प्राइमरी इंडिकेटर टैब के लिए) या SecondaryTabRow (सेकंडरी इंडिकेटर टैब के लिए) में किया जाता है.

Tab में ये मुख्य पैरामीटर शामिल हैं:

• selected: इससे यह तय होता है कि मौजूदा टैब को विज़ुअल तौर पर हाइलाइट किया गया है या नहीं.
• onClick(): यह एक ज़रूरी लैम्डा फ़ंक्शन है. यह उस कार्रवाई को तय करता है जो उपयोगकर्ता के टैब पर क्लिक करने पर की जाएगी. आम तौर पर, यहां नेविगेशन इवेंट हैंडल किए जाते हैं, चुनी गई टैब की स्थिति अपडेट की जाती है या उससे जुड़ा कॉन्टेंट लोड किया जाता है.
• text: इससे टैब में मौजूद टेक्स्ट दिखता है. ज़रूरी नहीं.
• icon: इससे टैब में आइकॉन दिखता है. ज़रूरी नहीं.
• enabled: यह कंट्रोल करता है कि टैब चालू है या नहीं और उससे इंटरैक्ट किया जा सकता है या नहीं. अगर इसे गलत पर सेट किया जाता है, तो टैब बंद स्थिति में दिखता है और क्लिक करने पर कोई जवाब नहीं देता.

उदाहरण: टैब पर आधारित नेविगेशन

नीचे दिए गए स्निपेट में, टॉप नेविगेशन बार को लागू किया गया है. इसमें ऐप्लिकेशन की अलग-अलग स्क्रीन के बीच नेविगेट करने के लिए टैब दिए गए हैं:

@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

प्रमुख बिंदु

• PrimaryTabRow टैब की एक हॉरिज़ॉन्टल लाइन दिखाता है. हर टैब, Destination से मेल खाता है.
• val navController = rememberNavController(), NavHostController का एक इंस्टेंस बनाता है और उसे सेव करता है. यह NavHost में नेविगेशन को मैनेज करता है.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, चुने गए टैब की स्थिति को मैनेज करता है.
  • startDestination.ordinal, Destination.SONGS enum एंट्री का संख्यात्मक इंडेक्स (पोजीशन) दिखाता है.
• किसी टैब पर क्लिक करने पर, onClick lambda calls navController.navigate(route = destination.route) का इस्तेमाल करके, उससे जुड़ी स्क्रीन पर जाया जाता है.
• onClick का लैम्डा, selectedDestination की स्थिति को अपडेट करता है, ताकि क्लिक किए गए टैब को हाइलाइट किया जा सके.Tab
• यह AppNavHost कंपोज़ेबल को कॉल करता है और navController और startDestination को पास करता है, ताकि चुनी गई स्क्रीन का असली कॉन्टेंट दिखाया जा सके.

नतीजा

नीचे दी गई इमेज में, पिछले स्निपेट का नतीजा दिखाया गया है:

अन्य संसाधन

• Material 3 - टैब
• Compose के साथ नेविगेशन