Sheet
Sheet is a modal window that dims and disables the parent view allowing for a short, focused task or providing additional information before returning to the main screen. They are an alternative to inline menus and simple dialogs, providing additional room for content, iconography, and actions.
Note: This component is based on on the Material3 implementation of ModalBottomSheet.
Parameters
Sets a callback for when this Sheet dismisses itself.
Optional Modifier for the wrapping Column in ModalBottomSheet.
The state of the bottom sheet.
ModalHeader if provided, will add a fixed ModalHeader component on top of the sheet layout.
ModalsActionFooterParams if provided, will add a fixed ModalsActionFooter at the bottom of the sheet layout
Top and Bottom dividers to highlight content division with Header and Footer
The background color of the sheet.
The padding applied to the sheet content.
The window insets used for window content.
The content of the bottom sheet.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.BottomSheet
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ModalHeader
import net.ikea.skapa.ui.components.ModalHeaderAction
import net.ikea.skapa.ui.components.ModalHeaderParams
import net.ikea.skapa.ui.components.ModalsActionFooterParams
import net.ikea.skapa.ui.components.ModalsHeaderVariant
import net.ikea.skapa.ui.components.Sheet
import net.ikea.skapa.ui.components.SheetValue
import net.ikea.skapa.ui.components.rememberSheetState
fun main() {
//sampleStart
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()
var showBottomSheet by rememberSaveable { mutableStateOf(false) }
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Button(label = "Show sheet") {
showBottomSheet = true
}
}
if (showBottomSheet) {
Sheet(
onDismiss = { showBottomSheet = false },
sheetState = sheetState,
// Customize header look
modalHeader = ModalHeader.Regular(
title = "Title",
// Header can have trailing and leading action, depending on the variant
leadingAction = null,
trailingAction = ModalHeaderAction(
iconResource = R.drawable.ic_cross_small,
contentDescription = "Close",
action = {
// Hide the sheet as per official Material3 guidelines
// https://developer.android.com/develop/ui/compose/components/bottom-sheets
scope.launch { sheetState.hide() }.invokeOnCompletion {
if (!sheetState.isVisible) {
showBottomSheet = false
}
}
}
)
),
// Customize footer look
sheetFooterParams = ModalsActionFooterParams(
// Buttons can be Stack or Side by side
// buttonAlignment = ModalFooterButtonAlignment.SideBySide,
primaryButton = {
Button(label = "Close") {
scope.launch { sheetState.hide() }.invokeOnCompletion {
if (!sheetState.isVisible) {
showBottomSheet = false
}
}
}
}, secondaryButton = null
),
// Set dividers to true if you have large content
// dividers = true,
background = SkapaTheme.colors.elevation2
) {
// Content you want to display
Box(modifier = Modifier.size(300.dp)) {
Text(text = "Hello There!", modifier = Modifier.align(Alignment.Center))
}
}
}
}
//sampleEnd
}