Skip to content

WindowListPopup

WindowListPopup is a popup list component that renders at the window level using Dialog. Unlike SuperListPopup, it does not require a Scaffold or MiuixPopupHost.

Import

kotlin
import top.yukonga.miuix.kmp.extra.WindowListPopup
import top.yukonga.miuix.kmp.basic.ListPopupColumn

Basic Usage

The WindowListPopup component can be used to create dropdown menus without Scaffold:

kotlin
val showPopup = remember { mutableStateOf(false) }
var selectedIndex by remember { mutableStateOf(0) }
val items = listOf("Option 1", "Option 2", "Option 3")

Box {
    TextButton(
        text = "Click to show menu",
        onClick = { showPopup.value = true }
    )
    WindowListPopup(
        show = showPopup,
        alignment = PopupPositionProvider.Align.Start,
        onDismissRequest = { showPopup.value = false }
    ) {
        val dismiss = LocalWindowListPopupState.current
        ListPopupColumn {
            items.forEachIndexed { index, string ->
                DropdownImpl(
                    text = string,
                    optionSize = items.size,
                    isSelected = selectedIndex == index,
                    onSelectedIndexChange = {
                        selectedIndex = index
                        dismiss()
                    },
                    index = index
                )
            }
        }
    }
}

Properties

WindowListPopup

Property NameTypeDescriptionDefault Value
showMutableState<Boolean>Controls the visibility state of the popup.-
popupModifierModifierModifier applied to the popup container.Modifier
popupPositionProviderPopupPositionProviderProvides position calculation logic for the popup.ListPopupDefaults.DropdownPositionProvider
alignmentPopupPositionProvider.AlignSpecifies the alignment of the popup relative to the anchor.PopupPositionProvider.Align.End
enableWindowDimBooleanWhether to dim the background when popup is shown.true
onDismissRequest(() -> Unit)?Called when the user requests dismissal (e.g., clicking outside)null
maxHeightDp?Maximum height of the popup content.null
minWidthDpMinimum width of the popup content.200.dp
content@Composable () -> UnitThe content to display inside the popup.-

ListPopupColumn

Property NameTypeDescriptionDefault Value
content@Composable () -> UnitThe list content to display inside the column.-

PopupPositionProvider.Align

ValueDescription
StartAligns the popup to the start of the anchor.
EndAligns the popup to the end of the anchor.
TopStartAligns the popup to the top-start of the anchor.
TopEndAligns the popup to the top-end of the anchor.
BottomStartAligns the popup to the bottom-start of the anchor.
BottomEndAligns the popup to the bottom-end of the anchor.

LocalWindowListPopupState

Provides a function () -> Unit to dismiss the current popup from within its content.

kotlin
val state = LocalWindowListPopupState.current
TextButton(
    text = "Close",
    onClick = { state.invoke() }
)

Changelog

Released under the Apache-2.0 License