OudsBottomSheetScaffold

fun OudsBottomSheetScaffold(sheetContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), sheetPeekHeight: Dp = BottomSheetDefaults.SheetPeekHeight, sheetDragHandle: Boolean = true, sheetSwipeEnabled: Boolean = true, topBar: @Composable () -> Unit? = null, snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) }, content: @Composable (PaddingValues) -> Unit)

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

Guidelinesunified-design-system.orange.com
Version1.0.0

Parameters

sheetContent

The content of the bottom sheet.

modifier

The Modifier to be applied to the entire scaffold.

scaffoldState

The state of the bottom sheet scaffold, which controls its behavior. See rememberBottomSheetScaffoldState.

sheetPeekHeight

The height of the bottom sheet when it is collapsed.

sheetDragHandle

Toggles the visibility of the drag handle at the top of the bottom sheet. Set to false to hide it.

sheetSwipeEnabled

Whether the sheet swiping is enabled and should react to the user's input.

topBar

The top app bar of the screen, typically an OudsTopAppBar.

snackbarHost

The component to host Snackbars that are pushed to be shown via SnackbarHostState.showSnackbar, typically a SnackbarHost.

content

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")
    }
}