FloatingToolbar

FloatingToolbar is a floating toolbar component in Miuix that renders its content within a container with a rounded background, arranged either horizontally or vertically. The actual placement on the screen is handled by the parent component, typically Scaffold.

This component is usually used in conjunction with Scaffold, placed in a specific position on the page to provide quick actions or display information.

Import

import top.yukonga.miuix.kmp.basic.FloatingToolbar
import top.yukonga.miuix.kmp.basic.FloatingToolbarDefaults
import top.yukonga.miuix.kmp.basic.ToolbarPosition // Used for Scaffold

Basic Usage

Scaffold(
    floatingToolbar = {
        FloatingToolbar {
            Row(
                modifier = Modifier.padding(8.dp),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) { // or Column
                IconButton(onClick = { /* Action 1 */ }) {
                    Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
                }
                IconButton(onClick = { /* Action 2 */ }) {
                    Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
                }
            }
        }
    },
    floatingToolbarPosition = ToolbarPosition.BottomCenter // Set the position
)

Properties

FloatingToolbar Properties

Property Name	Type	Description	Default Value	Required
modifier	Modifier	Modifier applied to the toolbar	Modifier	No
color	Color	Background color of the toolbar	FloatingToolbarDefaults.DefaultColor()	No
cornerRadius	Dp	Corner radius of the toolbar	FloatingToolbarDefaults.CornerRadius	No
outSidePadding	PaddingValues	Padding outside the toolbar	FloatingToolbarDefaults.OutSidePadding	No
shadowElevation	Dp	The shadow elevation of the toolbar	4.dp	No
showDivider	Boolean	Show divider line around the toolbar	false	No
defaultWindowInsetsPadding	Boolean	Apply default window insets padding	true	No
content	@Composable () -> Unit	Composable content area of the toolbar	-	Yes

FloatingToolbarDefaults Object

Property Name	Type	Description	Value
CornerRadius	Dp	Default corner radius	50.dp
DefaultColor()	@Composable () -> Color	Default background color	MiuixTheme.colorScheme.surfaceContainer
OutSidePadding	PaddingValues	Default outside padding	PaddingValues(12.dp, 8.dp)

ToolbarPosition (for Scaffold)

Please refer to the ToolbarPosition options in the Scaffold documentation.

Advanced Usage

Custom Styles

FloatingToolbar(
    color = MiuixTheme.colorScheme.primaryContainer,
    cornerRadius = 16.dp,
    outSidePadding = PaddingValues(24.dp),
    showDivider = false
) {
    Row(
        modifier = Modifier.padding(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) { // or Column
        IconButton(onClick = { /* Action 1 */ }) {
            Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit", tint = MiuixTheme.colorScheme.onPrimaryContainer)
        }
        IconButton(onClick = { /* Action 2 */ }) {
            Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete", tint = MiuixTheme.colorScheme.onPrimaryContainer)
        }
    }
}

Vertically Arranged Content

FloatingToolbar {
    Column(
        modifier = Modifier.padding(vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        IconButton(onClick = { /* Action 1 */ }) {
            Icon(MiuixIcons.Useful.Edit, contentDescription = "Edit")
        }
        IconButton(onClick = { /* Action 2 */ }) {
            Icon(MiuixIcons.Useful.Delete, contentDescription = "Delete")
        }
    }
}

Changing Position with Scaffold

Scaffold(
    floatingToolbar = {
        FloatingToolbar {
            // toolbar content
        }
    },
    floatingToolbarPosition = ToolbarPosition.CenterEnd // Place centered on the right edge
)

Handling Window Insets

FloatingToolbar(
    defaultWindowInsetsPadding = false // Handle window insets padding manually
) {
    // toolbar content
}