মেনুগুলি

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

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

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(painter = rememberVectorPainter(AppIcons.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(painter = rememberVectorPainter(AppIcons.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(painter = rememberVectorPainter(AppIcons.MoreVert), contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Person), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Settings), contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

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

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Info), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(painter = rememberVectorPainter(AppIcons.Help), contentDescription = null) },
                trailingIcon = { Icon(painter = rememberVectorPainter(AppIcons.OpenInNew), contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}

এই কোড Box-এর মধ্যে DropdownMenu-কে সংজ্ঞায়িত করে।

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

  • leadingIcon এবং trailingIcon প্যারামিটার DropdownMenuItem-এর শুরুতে এবং শেষে আইকন যোগ করে।
  • IconButton-এর মাধ্যমে মেনু বড় করা যায়।
  • DropdownMenu-এ একাধিক DropdownMenuItem কম্পোজেবল থাকে, যার প্রতিটি বেছে নেওয়া যায় এমন অ্যাকশনকে দেখায়।
  • HorizontalDivider কম্পোজেবল, মেনু আইটেমের গ্রুপ আলাদা করতে অনুভূমিক লাইন যোগ করে।

ফলাফল

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

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

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

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