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

इस पेज पर, आपके ऐप्लिकेशन में प्राइमरी टैब दिखाने का तरीका बताया गया है. साथ ही, इससे जुड़ी स्क्रीन और बुनियादी नेविगेशन के बारे में भी बताया गया है.
एपीआई सरफेस
टैब लागू करने के लिए, 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
lambda callsnavController.navigate(route = destination.route)
का इस्तेमाल करके, उससे जुड़ी स्क्रीन पर जाया जाता है. onClick
का लैम्डा,Tab
कीselectedDestination
स्थिति को अपडेट करता है, ताकि क्लिक किए गए टैब को हाइलाइट किया जा सके.- यह
AppNavHost
कंपोज़ेबल को कॉल करता है औरnavController
औरstartDestination
को पास करता है, ताकि चुनी गई स्क्रीन का असल कॉन्टेंट दिखाया जा सके.
नतीजा
नीचे दी गई इमेज में, पिछले स्निपेट का नतीजा दिखाया गया है:
.png?hl=hi)