Design/net.ikea.skapa.ui.components/BottomSheetM3

BottomSheetM3

@Composable
fun BottomSheetM3(sheetContent: @Composable () -> Unit, open: Boolean, modifier: Modifier = Modifier, sheetState: SheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true), modalHeader: ModalHeader = ModalHeader.Resizeable, sheetFooterParams: ModalsActionFooterParams? = null, dividers: Boolean = false, background: Color = SkapaTheme.colors.elevation2, contentHorizontalPadding: Dp = SheetM3Props.DefaultPadding, contentWindowInsets: @Composable () -> WindowInsets = { BottomSheetDefaults.windowInsets }, onDismiss: () -> Unit? = null)

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.

Parameters

sheetContent

The content of the bottom sheet.

open

indicates if the sheet is displayed or not.

modifier

Optional Modifier for the entire component.

sheetState

The state of the bottom sheet.

modalHeader

ModalHeader if provided, will add a fixed ModalHeader component on top of the sheet layout.

sheetFooterParams

ModalsActionFooterParams if provided, will add a fixed ModalsActionFooter at the bottom of the sheet layout

dividers

Top and Bottom dividers to highlight content division with Header and Footer

background

The background color of the sheet.

contentHorizontalPadding

The padding applied to the sheet content.

contentWindowInsets

The window insets used for window content.

onDismiss

optional. Sets a callback for when this Sheet dismisses itself.

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.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.BottomSheetM3
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.SheetValue
import net.ikea.skapa.ui.components.rememberSheetState

fun main() { 
   //sampleStart 
   SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    var open by remember { mutableStateOf(false) }
    BottomSheetM3(
        open = open,
        sheetContent = {
            // Content you want to display
            Box(modifier = Modifier.size(300.dp)) {
                Text(text = "Hello There!", modifier = Modifier.align(Alignment.Center))
            }
        },
        sheetState = rememberModalBottomSheetState(),
        // 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_skapa_design_cross_small,
                contentDescription = "Close",
                action = { open = false }
            )
        ),
        // Customize footer look
        sheetFooterParams = ModalsActionFooterParams(
            // Buttons can be Stack or Side by side
            // buttonAlignment = ModalFooterButtonAlignment.SideBySide,
            primaryButton = {
                Button(label = "Close") {
                    open = false
                }
            }, secondaryButton = null
        ),
        // Set dividers to true if you have large content
        // dividers = true,
        background = SkapaTheme.colors.neutral1,
        onDismiss = { open = false }
    )
    Box(modifier = Modifier.fillMaxSize()) {
        Button(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth(),
            label = "Show sheet"
        ) {
            open = true
        }
    }
} 
   //sampleEnd
}