SuperDropdown
SuperDropdown is a dropdown menu component in Miuix that provides a title, summary, and a list of dropdown options. It supports click interaction and is commonly used in option settings and list selections.
Prerequisite
This component depends on Scaffold providing MiuixPopupHost to render popup content. It must be used within Scaffold, otherwise popup content will not render correctly.
Import
kotlin
import top.yukonga.miuix.kmp.extra.SuperDropdownBasic Usage
The SuperDropdown component provides basic dropdown menu functionality:
kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Option 1", "Option 2", "Option 3")
Scaffold {
SuperDropdown(
title = "Dropdown Menu",
items = options,
selectedIndex = selectedIndex,
onSelectedIndexChange = { selectedIndex = it }
)
}Dropdown with Summary
kotlin
var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("中文", "English", "日本語")
Scaffold {
SuperDropdown(
title = "Language Settings",
summary = "Choose your preferred language",
items = options,
selectedIndex = selectedIndex,
onSelectedIndexChange = { selectedIndex = it }
)
}Component States
Disabled State
kotlin
SuperDropdown(
title = "Disabled Dropdown",
summary = "This dropdown menu is currently unavailable",
items = listOf("Option 1"),
selectedIndex = 0,
onSelectedIndexChange = {},
enabled = false
)Properties
SuperDropdown Properties
| Property Name | Type | Description | Default Value | Required |
|---|---|---|---|---|
| items | List<String> | List of dropdown options | - | Yes |
| selectedIndex | Int | Index of currently selected item | - | Yes |
| title | String | Title of the dropdown menu | - | Yes |
| modifier | Modifier | Modifier applied to the component | Modifier | No |
| titleColor | BasicComponentColors | Title text color configuration | BasicComponentDefaults.titleColor() | No |
| summary | String? | Summary description of dropdown | null | No |
| summaryColor | BasicComponentColors | Summary text color configuration | BasicComponentDefaults.summaryColor() | No |
| dropdownColors | DropdownColors | Color configuration for dropdown | DropdownDefaults.dropdownColors() | No |
| startAction | @Composable (() -> Unit)? | Custom start side content | null | No |
| bottomAction | @Composable (() -> Unit)? | Custom bottom side content | null | No |
| insideMargin | PaddingValues | Internal content padding | BasicComponentDefaults.InsideMargin | No |
| maxHeight | Dp? | Maximum height of dropdown menu | null | No |
| enabled | Boolean | Whether component is interactive | true | No |
| showValue | Boolean | Whether to show selected value | true | No |
| onSelectedIndexChange | ((Int) -> Unit)? | Callback when selection changes | - | No |
DropdownColors Properties
| Property Name | Type | Description |
|---|---|---|
| contentColor | Color | Option text color |
| containerColor | Color | Option background color |
| selectedContentColor | Color | Selected item text color |
| selectedContainerColor | Color | Selected item background color |
