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

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

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

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

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

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

उदाहरण

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

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

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 पैरामीटर का इस्तेमाल करके, 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