नेविगेशन ड्रॉअर कॉम्पोनेंट की मदद से, स्लाइड-इन मेन्यू बनाना
संग्रह की मदद से व्यवस्थित रहें
अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.
नेविगेशन पैनल कॉम्पोनेंट, स्लाइड-इन मेन्यू होता है. इसकी मदद से, उपयोगकर्ता आपके ऐप्लिकेशन के अलग-अलग सेक्शन पर नेविगेट कर सकते हैं. उपयोगकर्ता, साइड से स्वाइप करके या मेन्यू आइकॉन पर टैप करके इसे चालू कर सकते हैं.
नेविगेशन ड्रॉअर को लागू करने के लिए, इस्तेमाल के इन तीन उदाहरणों पर विचार करें:
- कॉन्टेंट को व्यवस्थित करना: उपयोगकर्ताओं को अलग-अलग कैटगरी के बीच स्विच करने की सुविधा दें. जैसे, समाचार या ब्लॉगिंग ऐप्लिकेशन में.
- खाता मैनेजमेंट: उपयोगकर्ता खातों वाले ऐप्लिकेशन में, खाता सेटिंग और प्रोफ़ाइल सेक्शन के लिए तुरंत लिंक उपलब्ध कराएं.
- सुविधा ढूंढना: एक ही मेन्यू में कई सुविधाओं और सेटिंग को व्यवस्थित करें, ताकि उपयोगकर्ता उन्हें आसानी से ढूंढ सकें और जटिल ऐप्लिकेशन में उन्हें ऐक्सेस कर सकें.
Material Design में, दो तरह के नेविगेशन ड्रॉअर होते हैं:
- स्टैंडर्ड: स्क्रीन पर दूसरे कॉन्टेंट के साथ जगह शेयर करें.
- मोडल: यह स्क्रीन पर मौजूद अन्य कॉन्टेंट के ऊपर दिखता है.
वर्शन के साथ काम करना
इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.
डिपेंडेंसी
नेविगेशन पैनल लागू करना
नेविगेशन ड्रॉअर लागू करने के लिए, ModalNavigationDrawer
कॉम्पोनेंट का इस्तेमाल किया जा सकता है:
प्रमुख बिंदु
ModalDrawerSheet
और ड्रॉअर का कॉन्टेंट देने के लिए, drawerContent
स्लॉट का इस्तेमाल करें.
ModalNavigationDrawer
, कई अन्य ड्रॉअर पैरामीटर स्वीकार करता है.
उदाहरण के लिए, gesturesEnabled
पैरामीटर की मदद से, यह टॉगल किया जा सकता है कि ड्रॉअर को खींचने पर वह खुले या नहीं. इसके लिए, नीचे दिए गए उदाहरण का पालन करें:
नेविगेशन पैनल के व्यवहार को कंट्रोल करना
ड्रॉवर के खुलने और बंद होने का तरीका कंट्रोल करने के लिए, DrawerState
का इस्तेमाल करें:
प्रमुख बिंदु
drawerState
पैरामीटर का इस्तेमाल करके, DrawerState
को ModalNavigationDrawer
पर पास करें.
DrawerState
, open
और close
फ़ंक्शन के साथ-साथ, मौजूदा ड्रॉअर की स्थिति से जुड़ी प्रॉपर्टी का ऐक्सेस भी देता है. निलंबित करने वाले इन फ़ंक्शन के लिए, CoroutineScope
की ज़रूरत होती है. इसे rememberCoroutineScope
का इस्तेमाल करके इंस्टैंशिएट किया जा सकता है. यूज़र इंटरफ़ेस (यूआई) इवेंट के जवाब में, निलंबित करने वाले फ़ंक्शन भी कॉल किए जा सकते हैं.
नतीजे
पहली इमेज. स्टैंडर्ड नेविगेशन पैनल (बाईं ओर) और मॉडल नेविगेशन पैनल (दाईं ओर).
ऐसे संग्रह जिनमें यह गाइड शामिल है
यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:
इंटरैक्टिव कॉम्पोनेंट दिखाना
जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया.
[[["समझने में आसान है","easyToUnderstand","thumb-up"],["मेरी समस्या हल हो गई","solvedMyProblem","thumb-up"],["अन्य","otherUp","thumb-up"]],[["वह जानकारी मौजूद नहीं है जो मुझे चाहिए","missingTheInformationINeed","thumb-down"],["बहुत मुश्किल है / बहुत सारे चरण हैं","tooComplicatedTooManySteps","thumb-down"],["पुराना","outOfDate","thumb-down"],["अनुवाद से जुड़ी समस्या","translationIssue","thumb-down"],["सैंपल / कोड से जुड़ी समस्या","samplesCodeIssue","thumb-down"],["अन्य","otherDown","thumb-down"]],["आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया."],[],[],null,["\u003cbr /\u003e\n\nThe [navigation drawer](https://material.io/components/navigation-drawer) component is a slide-in menu that lets users navigate\nto various sections of your app. Users can activate it by swiping from the side\nor tapping a menu icon.\n\nConsider these three use cases for implementing a navigation drawer:\n\n- **Content organization:** Enable users to switch between different categories, such as in news or blogging apps.\n- **Account management:** Provide quick links to account settings and profile sections in apps with user accounts.\n- **Feature discovery:** Organize multiple features and settings in a single menu to facilitate user discovery and access in complex apps.\n\nIn Material Design, there are two types of navigation drawers:\n\n- **Standard:** Share space within a screen with other content.\n- **Modal:** Appears over the top of other content within a screen.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a navigation drawer\n\nYou can use the [`ModalNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)) composable to implement a\nnavigation drawer:\n\nKey points\n\n- Use the `drawerContent` slot to provide a [`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) and\n provide the drawer's contents.\n\n- `ModalNavigationDrawer` accepts a number of additional drawer parameters.\n For example, you can toggle whether or not the drawer responds to drags with\n the `gesturesEnabled` parameter as in the following example:\n\nControl navigation drawer behavior\n\nTo control how the drawer opens and closes, use [`DrawerState`](/reference/kotlin/androidx/compose/material3/DrawerState):\n\nKey points\n\n- Pass a `DrawerState` to `ModalNavigationDrawer` using the `drawerState` parameter.\n- `DrawerState` provides access to the [`open`](/reference/kotlin/androidx/compose/material3/DrawerState#open) and [`close`](/reference/kotlin/androidx/compose/material3/DrawerState#close) functions, as well as properties related to the current drawer state. These suspending functions require a `CoroutineScope`, which you can instantiate using [`rememberCoroutineScope`](/reference/kotlin/androidx/compose/runtime/package-summary#remembercoroutinescope). You can also call the suspending functions in response to UI events.\n\nResults\n\n\n**Figure 1.** A standard navigation drawer (left) and a modal navigation drawer (right).\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]