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

import top.yukonga.miuix.kmp.extra.SuperDropdown

Basic Usage

The SuperDropdown component provides basic dropdown menu functionality:

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

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

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
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
leftAction	@Composable (() -> Unit)?	Custom left content	null	No
bottomAction	@Composable (() -> Unit)?	Custom bottom content	null	No
modifier	Modifier	Modifier applied to the component	Modifier	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
onClick	(() -> Unit)?	Additional callback on click	null	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

Advanced Usage

Custom Colors

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Red", "Green", "Blue")

Scaffold {
    SuperDropdown(
        title = "Custom Colors",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it },
        dropdownColors = DropdownDefaults.dropdownColors(
            selectedContentColor = Color.Red,
            selectedContainerColor = Color.Red.copy(alpha = 0.2f)
        )
    )
}

Limited Dropdown Height

var selectedIndex by remember { mutableStateOf(0) }
val options = List(20) { "Option ${it + 1}" }

Scaffold {
    SuperDropdown(
        title = "Limited Height",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it },
        maxHeight = 200.dp // Limit dropdown menu maximum height to 200dp
    )
}

Hide Selected Value Display

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Option 1", "Option 2", "Option 3")

Scaffold {
    SuperDropdown(
        title = "Hide Selected Value",
        items = options,
        selectedIndex = selectedIndex,
        onSelectedIndexChange = { selectedIndex = it },
        showValue = false // Hide selected value display
    )
}

Use with Dialog

var showDialog = remember { mutableStateOf(false) }
var selectedIndex by remember { mutableStateOf(0) }
val themes = listOf("Light Mode", "Dark Mode", "System Default")

Scaffold {
    SuperArrow(
        title = "Theme Settings",
        onClick = { showDialog.value = true },
        holdDownState = showDialog.value
    )
    
    SuperDialog(
        title = "Theme Settings",
        show = showDialog,
        onDismissRequest = { showDialog.value = false }
    ) {
        Card {
            SuperDropdown(
                title = "Theme Selection",
                summary = "Choose your preferred theme appearance",
                items = themes,
                selectedIndex = selectedIndex,
                onSelectedIndexChange = { selectedIndex = it }
            )
        }
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.padding(top = 12.dp)
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog.value = false },
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(16.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog.value = false },
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary()
            )
        }
    }
}

Changelog

Last edited 1 day ago

View full history

4007f40-docs: fix errors

9bda688-docs: Emphasize the use of MiuixPopupHost param

97d2fba-library: Add bottomAction param to BasicComponent

99b15e6-library: add spinnerColors to SuperSpinner

45fe52e-library: ListPopup: OS3 style like

752f3df-docs: Preview for components in documentation website (#80)

1fb088b-library: Refactor dialog/popup layout

5ec7367-library: Move holdDownState param to BasicComponent

7b99e64-docs: Add English version through AI translation

ab6bb69-chore: Add documents (#63)