মেনু

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

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

এপিআই সারফেস

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

ফলাফল

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

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

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

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