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