टैब

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

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

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

एपीआई सरफेस

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

नतीजा

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

अन्य संसाधन

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