Modal Bottom Sheet
A modal dialog that slides up from the bottom of the screen.
Installation
Modal Bottom Sheet uses the bottom sheet implementation from the composables library.
đź’ˇ
Components with complex implementation are provided via the composables library.
dependencies {
api("com.nomanr:composables:$version")
}
Then add the component:
./gradlew lumo --add ModalBottomSheet
Usage
Basic Bottom Sheet
var isVisible by remember { mutableStateOf(false) }
ModalBottomSheet(
isVisible = isVisible,
onDismissRequest = { isVisible = false }
) {
Column(modifier = Modifier.padding(16.dp)) {
Text("Bottom Sheet Content")
}
}
Custom Bottom Sheet
val sheetState = rememberModalBottomSheetState()
ModalBottomSheet(
sheetState = sheetState,
isVisible = isVisible,
onDismissRequest = { isVisible = false },
sheetGesturesEnabled = true,
dragHandle = {
Box(
modifier = Modifier
.padding(12.dp)
.background(color = Color.Unspecified)
) {
Spacer(
Modifier
.size(width = 36.dp, height = 6.dp)
.background(
color = AppTheme.colors.secondary,
shape = RoundedCornerShape(50)
)
)
}
}
) {
// Sheet content
}
API Documentation
Parameters
Parameter | Type | Description |
---|---|---|
sheetState | SheetState | State of the bottom sheet |
isVisible | Boolean | Whether the sheet is visible |
onDismissRequest | () -> Unit | Callback when sheet is dismissed |
sheetGesturesEnabled | Boolean | Whether gestures are enabled |
dragHandle | @Composable (() -> Unit)? | Optional custom drag handle |
content | @Composable ColumnScope.() -> Unit | Content to display in the sheet |