মেনুগুলি

ড্রপ-ডাউন মেনু ব্যবহারকারীদের কোনও আইকন, টেক্সট ফিল্ড বা অন্যান্য কম্পোনেন্টে ক্লিক করতে দেয় এবং তারপর সাময়িক সারফেসে বিকল্পের তালিকা থেকে বেছে নিতে দেয়। এই নির্দেশিকায় কীভাবে ডিভাইডার ও আইকন সহ সাধারণ ও আরও জটিল মেনু তৈরি করতে হয় তা বর্ণনা করা হয়েছে।

দুটি বিকল্প সহ একটি ড্রপডাউন মেনু দেখানো হয়েছে। তিনটি উল্লম্ব ডট সহ একটি আইকন ইঙ্গিত করে যে এটিতে ক্লিক করলে মেনু খুলবে।
ছবি ১. দুটি আইটেম তালিকাভুক্ত সহ একটি সাধারণ ড্রপ-ডাউন মেনু।

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

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

  • দুটি মেনু আইটেম সহ একটি সাধারণ DropdownMenu নির্ধারণ করে।
  • expanded প্যারামিটারটি মেনু বড় করা বা ছোট করার মাধ্যমে মেনুর দৃশ্যমানতা নিয়ন্ত্রণ করে।
  • onDismissRequest প্যারামিটার একটি কলব্যাককে সংজ্ঞায়িত করে যা ব্যবহারকারী মেনু বন্ধ করলে এক্সিকিউট হয়।
  • DropdownMenuItem কম্পোজ করার উপযুক্ত আইটেমটি ড্রপডাউন মেনুতে বেছে নেওয়ার উপযুক্ত আইটেমকে দেখায়।
  • IconButton মেনু বড় করা ও আড়াল করার ট্রিগার হিসেবে কাজ করে।

ফলাফল

তিনটি উল্লম্ব ডট সহ আইকন দ্বারা ট্রিগার করা একটি ড্রপডাউন মেনু। মেনুতে বেছে নেওয়ার মতো দুটি বিকল্প দেখানো হয়, বিকল্প ১ ও বিকল্প ২।
ছবি ২. শুধুমাত্র দুটি বিকল্প সহ একটি ন্যূনতম ড্রপ-ডাউন মেনু।

আরও বড় ড্রপ-ডাউন মেনু তৈরি করা

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 তৈরি করে যা ১০০টি প্লেসহোল্ডার আইটেম দেখায়।
  • forEach লুপ ডায়নামিকভাবে DropdownMenuItem কম্পোজ করার উপযুক্ত আইটেম জেনারেট করে। আইটেমগুলি লেজি ক্রিয়েট করা হয় না, এর অর্থ হল ১০০টি ড্রপ-ডাউন আইটেমই তৈরি করা হয় এবং কম্পোজিশনে থাকে।
  • 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 কম্পোজ করার উপযুক্ত আইটেম মেনু আইটেমের গ্রুপগুলিকে আলাদা করতে একটি অনুভূমিক লাইন যোগ করে।

ফলাফল

আগের স্নিপেটটি আইকন ও ডিভাইডার সহ একটি ড্রপ-ডাউন মেনু তৈরি করে:

প্রোফাইল, সেটিংস, মতামত জানান, 'সম্পর্কে' ও সহায়তা বিভাগ সহ ড্রপডাউন মেনু। প্রতিটি বিকল্পের একটি আইকন আছে, যেমন প্রোফাইলের জন্য একজন ব্যক্তির আইকন।
ছবি ৪. লিডিং ও ট্রেলিং আইকন সহ বিভিন্ন বিভাগে বিভক্ত একটি ড্রপ-ডাউন মেনু।

অতিরিক্ত রিসোর্স

  • মেটেরিয়াল ডিজাইন: মেনু