FloatingToolbar
FloatingToolbar is a floating toolbar component in COUI 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
kotlin
import io.github.suqi8.coui.kmp.basic.FloatingToolbar
import io.github.suqi8.coui.kmp.basic.FloatingToolbarDefaults
import io.github.suqi8.coui.kmp.basic.ToolbarPosition // Used for ScaffoldBasic Usage
kotlin
Scaffold(
floatingToolbar = {
FloatingToolbar {
Row(
modifier = Modifier.padding(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { // or Column
IconButton(onClick = { /* Action 1 */ }) {
Icon(COUIIcons.Edit, contentDescription = "Edit")
}
IconButton(onClick = { /* Action 2 */ }) {
Icon(COUIIcons.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 |
| content | @Composable () -> Unit | Composable content area of the toolbar | - | Yes |
FloatingToolbarDefaults Object
| Property Name | Type | Description | Value |
|---|---|---|---|
| CornerRadius | Dp | Default corner radius | 24.dp |
| defaultColor() | @Composable () -> Color | Default background color | COUITheme.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
kotlin
FloatingToolbar(
color = COUITheme.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(COUIIcons.Edit, contentDescription = "Edit", tint = COUITheme.colorScheme.onPrimaryContainer)
}
IconButton(onClick = { /* Action 2 */ }) {
Icon(COUIIcons.Delete, contentDescription = "Delete", tint = COUITheme.colorScheme.onPrimaryContainer)
}
}
}Toolbar with Divider
Set showDivider = true to draw a hairline divider ring around the toolbar; set shadowElevation = 0.dp to disable the drop shadow:
kotlin
FloatingToolbar(
showDivider = true,
shadowElevation = 0.dp
) {
Row(
modifier = Modifier.padding(8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
IconButton(onClick = { /* Action 1 */ }) {
Icon(COUIIcons.Edit, contentDescription = "Edit")
}
IconButton(onClick = { /* Action 2 */ }) {
Icon(COUIIcons.Delete, contentDescription = "Delete")
}
}
}Vertically Arranged Content
kotlin
FloatingToolbar {
Column(
modifier = Modifier.padding(vertical = 8.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
IconButton(onClick = { /* Action 1 */ }) {
Icon(COUIIcons.Edit, contentDescription = "Edit")
}
IconButton(onClick = { /* Action 2 */ }) {
Icon(COUIIcons.Delete, contentDescription = "Delete")
}
}
}Changing Position with Scaffold
kotlin
Scaffold(
floatingToolbar = {
FloatingToolbar {
// toolbar content
}
},
floatingToolbarPosition = ToolbarPosition.CenterEnd // Place centered on the right edge
)
