OudsModalBottomSheet

fun OudsModalBottomSheet(onDismissRequest: () -> Unit, modifier: Modifier = Modifier, sheetState: SheetState = rememberModalBottomSheetState(), sheetGesturesEnabled: Boolean = true, dragHandle: Boolean = true, contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets }, properties: ModalBottomSheetProperties = ModalBottomSheetProperties(), content: @Composable ColumnScope.() -> Unit)

The bottom sheets show secondary content anchored to the bottom of the screen. OudsModalBottomSheet displays content that temporarily blocks interaction with the main screen. It appears in front of app content, disabling all other app functionality when they appear, and remaining on screen until confirmed, dismissed, or a required action has been taken.

For a bottom sheet that co-exists with the main screen content, use OudsBottomSheetScaffold.

Design

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

Parameters

onDismissRequest

Callback executed when the user clicks outside the bottom sheet, after sheet animates to Hidden.

modifier

Optional Modifier for the modal bottom sheet.

sheetState

The state of the bottom sheet, which controls its visibility and allows for programmatic control. See rememberModalBottomSheetState.

sheetGesturesEnabled

Whether the bottom sheet can be interacted with by gestures.

dragHandle

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

contentWindowInsets

Callback which provides window insets to be passed to the bottom sheet content via Modifier.windowInsetsPadding. ModalBottomSheet will pre-emptively consume top insets based on its current offset. This keeps content outside the expected window insets at any position.

properties

ModalBottomSheetProperties for further customization of this modal bottom sheet's window behavior.

content

The content to be displayed inside the modal bottom sheet.

Samples

OudsModalBottomSheet(
    onDismissRequest = { },
    sheetState = rememberStandardBottomSheetState()
) {
    Column(modifier = Modifier.padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)) {
        Text(text = "Modal bottom sheet content.")
    }
}