टैब

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

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

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

एपीआई सरफ़ेस

टैब लागू करने के लिए, 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 का लैम्डा, TabselectedDestination की स्थिति को अपडेट करता है, ताकि क्लिक किए गए टैब को हाइलाइट किया जा सके.
• यह AppNavHost कंपोज़ेबल को कॉल करता है और navController और startDestination को पास करता है, ताकि चुनी गई स्क्रीन का असली कॉन्टेंट दिखाया जा सके.

नतीजा

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

अन्य संसाधन

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