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

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

नेविगेशन ड्रॉअर को लागू करने के लिए, इस्तेमाल के इन तीन उदाहरणों पर विचार करें:

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

Material Design में, दो तरह के नेविगेशन ड्रॉअर होते हैं:

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

उदाहरण

नेविगेशन ड्रॉअर लागू करने के लिए, ModalNavigationDrawer कॉम्पोज़ेबल का इस्तेमाल किया जा सकता है.

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

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            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 पैरामीटर का इस्तेमाल करके, DrawerState को ModalNavigationDrawer पर पास करना चाहिए.

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