মেনু

ড্রপ-ডাউন মেনু ব্যবহারকারীদের একটি আইকন, টেক্সট ক্ষেত্র বা অন্যান্য উপাদানে ক্লিক করতে দেয় এবং তারপর একটি অস্থায়ী পৃষ্ঠের বিকল্পগুলির একটি তালিকা থেকে নির্বাচন করে৷ এই নির্দেশিকাটি বর্ণনা করে কিভাবে বিভাজক এবং আইকন সহ মৌলিক মেনু এবং আরও জটিল মেনু উভয়ই তৈরি করা যায়।

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

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।
চিত্র 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 ল্যাম্বডা আপনাকে ব্যবহারকারীর একটি মেনু আইটেম নির্বাচন করার সময় সম্পাদিত ক্রিয়াটি সংজ্ঞায়িত করতে দেয়।

ফলাফল

পূর্ববর্তী কোড স্নিপেট নিম্নলিখিত স্ক্রোলযোগ্য মেনু তৈরি করে:

অনেকগুলি বিকল্প সহ একটি ড্রপডাউন মেনু, সবগুলি দেখতে স্ক্রোলিং প্রয়োজন৷ আইটেম
চিত্র 3. একটি দীর্ঘ, স্ক্রোলযোগ্য ড্রপ-ডাউন মেনু।

ডিভাইডার সহ একটি দীর্ঘ ড্রপ-ডাউন মেনু তৈরি করুন

নিম্নলিখিত স্নিপেটটি একটি ড্রপ-ডাউন মেনুর আরও উন্নত বাস্তবায়ন দেখায়। এই স্নিপেটে, লিডিং এবং ট্রেইলিং আইকনগুলি মেনু আইটেমগুলিতে যোগ করা হয় এবং মেনু আইটেমগুলির পৃথক গোষ্ঠীগুলিকে ভাগ করে৷ 

@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 composables একটি অনুভূমিক রেখা সন্নিবেশ করান মেনু আইটেমগুলির পৃথক গোষ্ঠীতে।

ফলাফল

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

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

অতিরিক্ত সম্পদ