टैब

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

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

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

एपीआई सरफ़ेस

टैब लागू करने के लिए, 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)
    }
}

खास बातें

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

नतीजा

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

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

अन्य संसाधन