Skip to content

SuperDialog

SuperDialog is a dialog component in Miuix used to display important information, collect user input, or confirm user actions. The dialog appears above the current interface and supports custom styles and content layouts.

WARNING

SuperDialog must be used within a Scaffold component!

Import

kotlin
import top.yukonga.miuix.kmp.extra.SuperDialog

Basic Usage

SuperDialog component provides basic dialog functionality:

kotlin
var showDialog = remember { mutableStateOf(false) }

Scaffold {
    TextButton(
        text = "Show Dialog",
        onClick = { showDialog.value = true }
    )

    SuperDialog(
        title = "Dialog Title",
        summary = "This is a basic dialog example that can contain various content.",
        show = showDialog,
        onDismissRequest = { showDialog.value = false } // Close dialog
    ) {
        TextButton(
            text = "Confirm",
            onClick = { showDialog.value = false }, // Close dialog
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Properties

SuperDialog Properties

Property NameTypeDescriptionDefault ValueRequired
showMutableState<Boolean>State object to control dialog visibility-Yes
modifierModifierModifier applied to the dialogModifierNo
titleString?Dialog titlenullNo
titleColorColorTitle text colorSuperDialogDefaults.titleColor()No
summaryString?Dialog summary textnullNo
summaryColorColorSummary text colorSuperDialogDefaults.summaryColor()No
backgroundColorColorDialog background colorSuperDialogDefaults.backgroundColor()No
enableWindowDimBooleanWhether to enable dimming layertrueNo
onDismissRequest(() -> Unit)?Callback when dialog is closednullNo
outsideMarginDpSizeDialog external marginSuperDialogDefaults.outsideMarginNo
insideMarginDpSizeDialog internal content marginSuperDialogDefaults.insideMarginNo
defaultWindowInsetsPaddingBooleanWhether to apply default window insets paddingtrueNo
content@Composable () -> UnitDialog content-Yes

SuperDialogDefaults Object

The SuperDialogDefaults object provides default settings for the SuperDialog component.

Properties

Property NameTypeDescription
outsideMarginDpSizeDefault dialog external margin
insideMarginDpSizeDefault dialog internal margin

Functions

Function NameReturn TypeDescription
titleColor()ColorGet default title color
summaryColor()ColorGet default summary color
backgroundColor()ColorGet default dialog background color

Advanced Usage

Custom Styled Dialog

kotlin
var showDialog = remember { mutableStateOf(false) }

Scaffold {
    TextButton(
        text = "Show Custom Styled Dialog",
        onClick = { showDialog.value = true }
    )

    SuperDialog(
        title = "Custom Style",
        summary = "This dialog uses custom colors and margins",
        show = showDialog,
        onDismissRequest = { showDialog.value = false }, // Close dialog
        titleColor = Color.Blue,
        summaryColor = Color.Gray,
        backgroundColor = Color(0xFFF5F5F5),
        outsideMargin = DpSize(20.dp, 20.dp),
        insideMargin = DpSize(30.dp, 30.dp)
    ) {
        Text(
            text = "Custom Content Area",
            modifier = Modifier.padding(vertical = 16.dp)
        )
        
        TextButton(
            text = "Close",
            onClick = { showDialog.value = false }, // Close dialog
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Creating a Confirmation Dialog

kotlin
var showConfirmDialog = remember { mutableStateOf(false) }
var result by remember { mutableStateOf("") }

Scaffold {
    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
        TextButton(
            text = "Show Confirmation Dialog",
            onClick = { showConfirmDialog.value = true }
        )
        
        Text("Result: $result")
    }
    
    SuperDialog(
        title = "Confirm Action",
        summary = "This action is irreversible, do you want to proceed?",
        show = showConfirmDialog,
        onDismissRequest = { showConfirmDialog.value = false } // Close dialog
    ) {
        Row(
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            TextButton(
                text = "Cancel",
                onClick = { 
                    result = "User cancelled the action"
                    showConfirmDialog.value = false // Close dialog
                },
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(20.dp))
            TextButton(
                text = "Confirm",
                onClick = { 
                    result = "User confirmed the action"
                    showConfirmDialog.value = false // Close dialog 
                },
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary()
            )
        }
    }
}

Dialog with Input Field

kotlin
var showDialog = remember { mutableStateOf(false) }
var textFieldValue by remember { mutableStateOf("") }

Scaffold {
    TextButton(
        text = "Show Input Dialog",
        onClick = { showDialog.value = true }
    )

    SuperDialog(
        title = "Please Enter Content",
        show = showDialog,
        onDismissRequest = { showDialog.value = false } // Close dialog
    ) {
        TextField(
            modifier = Modifier.padding(bottom = 16.dp),
            value = textFieldValue,
            maxLines = 1,
            onValueChange = { textFieldValue = it }
        )
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog.value = false }, // Close dialog
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(20.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog.value = false }, // Close dialog
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary() // Use theme color
            )
        }
    }
}

Dialog with Form

kotlin
var showDialog = remember { mutableStateOf(false) }
var dropdownSelectedOption by remember { mutableStateOf(0) }
var switchState by remember { mutableStateOf(false) }
val dropdownOptions = listOf("Option 1", "Option 2")

Scaffold {
    TextButton(
        text = "Show Form Dialog",
        onClick = { showDialog.value = true }
    )

    SuperDialog(
        title = "Form Dialog",
        show = showDialog,
        onDismissRequest = { showDialog.value = false } // Close dialog
    ) {
        Card(
            color = MiuixTheme.colorScheme.secondaryContainer,
        ) {
            SuperDropdown(
                title = "Dropdown Selection",
                items = dropdownOptions,
                selectedIndex = dropdownSelectedOption,
                onSelectedIndexChange = { dropdownSelectedOption = it }
            )
            
            SuperSwitch(
                title = "Switch Option",
                checked = switchState,
                onCheckedChange = { switchState = it }
            )
        }
        
        Spacer(Modifier.height(12.dp))
        
        Row(
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog.value = false }, // Close dialog
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(20.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog.value = false }, // Close dialog
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary() // Use theme color
            )
        }
    }
}

Dialog with Color Picker

kotlin
var showColorDialog = remember { mutableStateOf(false) }
var selectedColor by remember { mutableStateOf(Color.Red) }

Scaffold {
    TextButton(
        text = "Select Color",
        onClick = { showColorDialog.value = true }
    )
    
    SuperDialog(
        title = "Select Color",
        show = showColorDialog,
        onDismissRequest = { showColorDialog.value = false } // Close dialog
    ) {
        Column {
            ColorPicker(
                initialColor = selectedColor,
                onColorChanged = { selectedColor = it }
            )
            Spacer(modifier = Modifier.height(16.dp))
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp),
            ) {
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "Cancel",
                    onClick = { showColorDialog.value = false } // Close dialog
                )
                TextButton(
                    modifier = Modifier.weight(1f),
                    text = "Confirm",
                    colors = ButtonDefaults.textButtonColorsPrimary(), // Use theme color
                    onClick = {
                        showColorDialog.value = false // Close dialog
                        // Handle confirm logic
                    }
                )
            }
        }
    }
}

Released under the Apache-2.0 License