मेन्यू

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

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

एपीआई सरफ़ेस

पसंद के मुताबिक ड्रॉप-डाउन मेन्यू लागू करने के लिए, 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... */ }
            )
        }
    }
}

कोड के बारे में अहम बातें

  • यह दो मेन्यू आइटम वाला एक बुनियादी 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... */ }
                )
            }
        }
    }
}

कोड के बारे में अहम बातें

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

नतीजा

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

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

डिवाइडर वाले ज़्यादा आइटम वाला ड्रॉप-डाउन मेन्यू बनाना

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

@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... */ }
            )
        }
    }
}

यह कोड, Box में एक DropdownMenu तय करता है.

कोड के बारे में अहम बातें

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

नतीजा

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

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

अन्य संसाधन