नेविगेशन पैनल

नेविगेशन पैनल कॉम्पोनेंट एक स्लाइड-इन मेन्यू होता है. इसकी मदद से उपयोगकर्ता नेविगेट कर सकते हैं सेक्शन पर ले जाया जा सकता है. उपयोगकर्ता स्क्रीन के किनारे से स्वाइप करके, इसे चालू कर सकते हैं मेन्यू आइकॉन पर टैप करें.

नेविगेशन पैनल को लागू करने के लिए, इस्तेमाल के इन तीन उदाहरणों पर ध्यान दें:

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

मटीरियल डिज़ाइन में, दो तरह के नेविगेशन पैनल होते हैं:

• स्टैंडर्ड मोड: स्क्रीन पर मौजूद अन्य कॉन्टेंट के साथ स्टोरेज शेयर करें.
• मोडल: स्क्रीन में दूसरे कॉन्टेंट के सबसे ऊपर दिखता है.

उदाहरण

ModalNavigationDrawer कंपोज़ेबल का इस्तेमाल करके, नेविगेशन पैनल.

ModalDrawerSheet देने के लिए drawerContent स्लॉट का इस्तेमाल करें और पैनल का कॉन्टेंट, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer कई और ड्रॉर पैरामीटर स्वीकार करता है. इसके लिए उदाहरण के लिए, यह टॉगल किया जा सकता है कि पैनल, gesturesEnabled पैरामीटर, जैसा कि इस उदाहरण में दिखाया गया है:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

कंट्रोल का व्यवहार

पैनल के खुलने और बंद होने के तरीके को कंट्रोल करने के लिए, DrawerState का इस्तेमाल करें. आपको ऐसा करना चाहिए drawerState का इस्तेमाल करके, ModalNavigationDrawer को DrawerState पास करें पैरामीटर.

DrawerState, open और close फ़ंक्शन का ऐक्सेस देता है, क्योंकि साथ ही, जो मौजूदा ड्रॉर स्थिति से जुड़ी प्रॉपर्टी हैं. इन निलंबित सेवाओं के विज्ञापन फ़ंक्शन के लिए CoroutineScope की ज़रूरत होती है, जिसका इस्तेमाल करके इंस्टैंशिएट किया जा सकता है rememberCoroutineScope. सस्पेंशन फ़ंक्शन को इसमें भी कॉल किया जा सकता है यूज़र इंटरफ़ेस (यूआई) इवेंट का रिस्पॉन्स.

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt