OudsBottomSheetScaffold
Bottom sheets show secondary content anchored to the bottom of the screen. OudsBottomSheetScaffold lays out screen content with a standard bottom sheet anchored to the bottom. Standard bottom sheets co-exist with the main screen content, allowing users to interact with both simultaneously.
For a bottom sheet that appears in front of app content and requires user action to be dismissed (a modal behavior), consider using OudsModalBottomSheet.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.0.0 |
Parameters
The content of the bottom sheet.
The Modifier to be applied to the entire scaffold.
The state of the bottom sheet scaffold, which controls its behavior. See rememberBottomSheetScaffoldState.
The height of the bottom sheet when it is collapsed.
Toggles the visibility of the drag handle at the top of the bottom sheet. Set to false to hide it.
Whether the sheet swiping is enabled and should react to the user's input.
The top app bar of the screen, typically an OudsTopAppBar.
The component to host Snackbars that are pushed to be shown via SnackbarHostState.showSnackbar, typically a SnackbarHost.
The main content of the screen. The lambda receives a PaddingValues that should be applied to the content root via Modifier.padding and Modifier.consumeWindowInsets to properly offset top and bottom bars. If using Modifier.verticalScroll, apply this modifier to the child of the scroll, and not on the scroll itself.
Samples
OudsBottomSheetScaffold(
sheetContent = {
Text(
modifier = Modifier.padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin),
text = "Bottom sheet content"
)
},
scaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState = rememberStandardBottomSheetState(initialValue = SheetValue.Expanded)
)
) {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Text(text = "Main screen content")
}
}