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

BottomSheet

@Composable
fun BottomSheet(sheetContent: @Composable () -> Unit, modifier: Modifier = Modifier, sheetState: SheetState = rememberSheetState(SheetValue.Hidden), modalHeaderParams: ModalHeaderParams? = null, sheetFooterParams: ModalsActionFooterParams? = null, dividers: Boolean = false, background: Color = SkapaTheme.colors.elevation2, contentHorizontalPadding: Dp = SheetProps.DefaultPadding, onDismiss: () -> Unit? = null)

Deprecated

This BottomSheet component is based on Material2. Migrate to Sheet based on Material3.Have a look at the components sample, net.ikea.skapa.ui.samples.SheetM3Sample

Replace with

Sheet(onDismiss = onDismiss, modifier = modifier, sheetState = sheetState /* TODO */, modalHeader = modalHeaderParams /* TODO */, sheetFooterParams = sheetFooterParams, dividers = dividers, background = background, contentHorizontalPadding = contentHorizontalPadding /* TODO */, content = sheetContent)
Content copied to clipboard

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.

modifier

Optional Modifier for the entire component.

sheetState

SheetState The state of the bottom sheet.

modalHeaderParams

ModalHeaderParams 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

contentHorizontalPadding

The padding applied to the sheet content.

background

The background color of the sheet.

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.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 
   val scope = rememberCoroutineScope()
SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    val state = rememberSheetState(initialValue = SheetValue.Hidden)
    BottomSheet(
        sheetContent = {
            // Content you want to display
            Box(modifier = Modifier.size(300.dp)) {
                Text(text = "Hello There!", modifier = Modifier.align(Alignment.Center))
            }
        },
        sheetState = state,
        // Customize header look
        modalHeaderParams = ModalHeaderParams(
            variant = ModalsHeaderVariant.Regular,
            // Header can have trailing and leading action, depending on the variant
            trailingAction = ModalHeaderAction(
                iconResource = R.drawable.ic_cross_small,
                contentDescription = "Close",
                action = { scope.launch { state.hide() } }
            )
        ),
        // Customize footer look
        sheetFooterParams = ModalsActionFooterParams(
            // Buttons can be Stack or Side by side
            // buttonAlignment = ModalFooterButtonAlignment.SideBySide,
            primaryButton = {
                Button(label = "Close") {
                    scope.launch {
                        state.hide()
                    }
                }
            }, secondaryButton = null
        ),
        // Set dividers to true if you have large content
        // dividers = true,
        background = SkapaTheme.colors.neutral1,
        onDismiss = {
            scope.launch { state.hide() }
        }
    )
    Box(modifier = Modifier.fillMaxSize()) {
        Button(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth(),
            label = "Show sheet"
        ) {
            scope.launch { state.show() }
        }
    }
} 
   //sampleEnd
}