इस पेज का अनुवाद Cloud Translation API से किया गया है.

मेन्यू

ड्रॉपडाउन मेन्यू की मदद से, उपयोगकर्ता किसी आइकॉन, टेक्स्ट फ़ील्ड या अन्य कॉम्पोनेंट पर क्लिक कर सकते हैं. इसके बाद, वे अस्थायी प्लैटफ़ॉर्म पर मौजूद विकल्पों की सूची में से कोई विकल्प चुन सकते हैं. इस गाइड में, डिवाइडर और आइकॉन के साथ बुनियादी मेन्यू और ज़्यादा जटिल मेन्यू बनाने का तरीका बताया गया है.

एपीआई का प्लैटफ़ॉर्म

पसंद के मुताबिक ड्रॉपडाउन मेन्यू लागू करने के लिए, DropdownMenu, DropdownMenuItem, और IconButton कॉम्पोनेंट का इस्तेमाल करें. DropdownMenu और DropdownMenuItem कॉम्पोनेंट का इस्तेमाल, मेन्यू आइटम दिखाने के लिए किया जाता है. वहीं, IconButton ड्रॉप-डाउन मेन्यू को दिखाने या छिपाने के लिए ट्रिगर होता है.

DropdownMenu कॉम्पोनेंट के मुख्य पैरामीटर में ये शामिल हैं:

expanded: इससे पता चलता है कि मेन्यू दिख रहा है या नहीं.
onDismissRequest: मेन्यू को बंद करने के लिए इस्तेमाल किया जाता है.
content: मेन्यू का कॉम्पोज़ेबल कॉन्टेंट, जिसमें आम तौर पर DropdownMenuItem कॉम्पोज़ेबल शामिल होते हैं.

DropdownMenuItem के मुख्य पैरामीटर में ये शामिल हैं:

text: मेन्यू आइटम में दिखाए जाने वाले कॉन्टेंट के बारे में बताता है.
onClick: मेन्यू में मौजूद आइटम के साथ इंटरैक्शन को मैनेज करने के लिए कॉलबैक.

बुनियादी ड्रॉपडाउन मेन्यू बनाना

यहां दिए गए स्निपेट में, DropdownMenu को कम से कम लागू करने का तरीका बताया गया है:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}Menus.kt

कोड के बारे में अहम जानकारी

दो मेन्यू आइटम वाले बुनियादी DropdownMenu की जानकारी देता है.
expanded पैरामीटर से यह कंट्रोल किया जाता है कि मेन्यू, बड़ा किया गया है या छोटा किया गया है.
onDismissRequest पैरामीटर, एक कॉलबैक तय करता है जो उपयोगकर्ता के मेन्यू को बंद करने पर लागू होता है.
DropdownMenuItem कंपोज़ेबल, ड्रॉपडाउन मेन्यू में चुने जा सकने वाले आइटम दिखाता है.
IconButton, मेन्यू को बड़ा और छोटा करने की सुविधा को ट्रिगर करता है.

नतीजा

तीन वर्टिकल बिंदु वाले आइकॉन से ट्रिगर होने वाला ड्रॉपडाउन मेन्यू. मेन्यू में, चुने जा सकने वाले दो विकल्प दिखते हैं: विकल्प 1 और विकल्प 2. — **दूसरी इमेज.** सिर्फ़ दो विकल्पों वाला छोटा ड्रॉपडाउन मेन्यू.

लंबा ड्रॉपडाउन मेन्यू बनाना

अगर मेन्यू के सभी आइटम एक साथ नहीं दिखाए जा सकते, तो DropdownMenu डिफ़ॉल्ट रूप से स्क्रोल किया जा सकता है. नीचे दिया गया स्निपेट, लंबा और स्क्रोल किया जा सकने वाला ड्रॉपडाउन मेन्यू बनाता है:

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}Menus.kt

कोड के बारे में अहम जानकारी

जब DropdownMenu के कॉन्टेंट की कुल ऊंचाई, उपलब्ध जगह से ज़्यादा हो जाती है, तो उसे स्क्रोल किया जा सकता है. यह कोड, स्क्रोल किया जा सकने वाला DropdownMenu बनाता है, जिसमें 100 प्लेसहोल्डर आइटम दिखते हैं.
forEach लूप, DropdownMenuItem कॉम्पोज़ेबल को डाइनैमिक तौर पर जनरेट करता है. आइटम, धीरे-धीरे नहीं बनते. इसका मतलब है कि सभी 100 ड्रॉपडाउन आइटम, कंपोज़िशन में मौजूद होते हैं.
IconButton पर क्लिक करने पर, DropdownMenu को बड़ा और छोटा किया जा सकता है.
हर DropdownMenuItem में मौजूद onClick lambda फ़ंक्शन की मदद से, यह तय किया जा सकता है कि उपयोगकर्ता के मेन्यू आइटम चुनने पर क्या कार्रवाई की जाए.

नतीजा

ऊपर दिया गया कोड स्निपेट, स्क्रोल किया जा सकने वाला यह मेन्यू बनाता है:

कई विकल्पों वाला ड्रॉपडाउन मेन्यू, जिसमें सभी आइटम देखने के लिए स्क्रोल करना पड़ता है. — **तीसरी इमेज.** लंबा और स्क्रोल किया जा सकने वाला ड्रॉपडाउन मेन्यू.

डिवाइडर की मदद से लंबा ड्रॉपडाउन मेन्यू बनाना

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

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}Menus.kt

यह कोड, Box में मौजूद DropdownMenu के बारे में बताता है.

कोड के बारे में अहम जानकारी

leadingIcon और trailingIcon पैरामीटर, DropdownMenuItem की शुरुआत और आखिर में आइकॉन जोड़ते हैं.
IconButton, मेन्यू को बड़ा करने की सुविधा को ट्रिगर करता है.
DropdownMenu में कई DropdownMenuItem कॉम्पोज़ेबल होते हैं. हर कॉम्पोज़ेबल, चुनी जा सकने वाली किसी कार्रवाई को दिखाता है.
HorizontalDivider कॉम्पोज़ेबल, मेन्यू आइटम के ग्रुप को अलग करने के लिए, हॉरिज़ॉन्टल लाइन डालते हैं.

नतीजा

ऊपर दिया गया स्निपेट, आइकॉन और डिवाइडर के साथ ड्रॉपडाउन मेन्यू बनाता है:

प्रोफ़ाइल, सेटिंग, सुझाव/राय दें या शिकायत करें, जानकारी, और — **चौथी इमेज.** ड्रॉपडाउन मेन्यू, जिसे शुरुआत और आखिर में मौजूद आइकॉन के साथ सेक्शन में बांटा गया है.

अन्य संसाधन

Material Design: मेन्यू