# ModalBottomSheetLayout

Common/All

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)( bottomSheetNavigator: https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, sheetGesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, sheetShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, sheetElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, sheetBackgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, sheetContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, scrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Create a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` displaying content from a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator`. | Cmn |

## Functions

### ModalBottomSheetLayout

Cmn Artifact: [androidx.compose.material:material-navigation](https://developer.android.com/jetpack/androidx/releases/compose-material) [View Source](https://cs.android.com/search?q=file:androidx/compose/material/navigation/BottomSheet.kt+function:ModalBottomSheetLayout) Added in [1.10.0](https://developer.android.com/jetpack/androidx/releases/compose-material#1.10.0)

```
@Composable
fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    sheetGesturesEnabled: Boolean = true,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit
): Unit
```

Create a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` displaying content from a `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator`.

```kotlin
import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

val bottomSheetNavigator = rememberBottomSheetNavigator()
val navController = rememberNavController(bottomSheetNavigator)

ModalBottomSheetLayout(bottomSheetNavigator) {
    NavHost(navController, Destinations.Home) {
        composable(Destinations.Home) {
            HomeScreen(
                showSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=From Home Screen")
                },
                showFeed = { navController.navigate(Destinations.Feed) },
            )
        }
        composable(Destinations.Feed) { Text("Feed!") }
        bottomSheet(Destinations.Sheet + "?arg={arg}") { backstackEntry ->
            val arg = backstackEntry.arguments?.getString("arg") ?: "Missing argument :("
            BottomSheet(
                showFeed = { navController.navigate(Destinations.Feed) },
                showAnotherSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=${UUID.randomUUID()}")
                },
                arg = arg,
            )
        }
    }
}
```

| Parameters |
|---|---|
| `bottomSheetNavigator: https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/BottomSheetNavigator` | The navigator that manages the bottom sheet content. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` for the entire component. |
| `sheetGesturesEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Whether the bottom sheet can be interacted with by gestures. |
| `sheetShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = MaterialTheme.shapes.large` | The shape of the bottom sheet. |
| `sheetElevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ModalBottomSheetDefaults.Elevation` | The elevation of the bottom sheet. |
| `sheetBackgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.surface` | The background color of the bottom sheet. |
| `sheetContentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(sheetBackgroundColor)` | The preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/package-summary#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)`, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet. |
| `scrimColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = ModalBottomSheetDefaults.scrimColor` | The color of the scrim that is applied to the rest of the screen when the bottom sheet is visible. If the color passed is `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Unspecified()`, then a scrim will no longer be applied and the bottom sheet will not block interaction with the rest of the screen when visible. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of rest of the screen. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material/navigation/ModalBottomSheetLayout.composable#ModalBottomSheetLayout(androidx.compose.material.navigation.BottomSheetNavigator,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)` |   |