Represents the edge of a resizable pane that is docked, i.e.
@OptIn(ExperimentalMaterial3AdaptiveApi::class, ExperimentalMaterial3Api::class)
@Preview
@Sampled
@Composable
fun SupportingPaneScaffoldSampleWithExtraPaneLevitatedAsBottomSheet() {
val coroutineScope = rememberCoroutineScope()
val scaffoldNavigator = levitateAsBottomSheetSample<NavItemData>()
val extraItems = listOf("Extra content")
val selectedItem = NavItemData(index = 0, showExtra = true)
SupportingPaneScaffold(
directive = scaffoldNavigator.scaffoldDirective,
scaffoldState = scaffoldNavigator.scaffoldState,
mainPane = {
AnimatedPane {
MainPaneContent(
scaffoldNavigator = scaffoldNavigator,
hasExtraPane = true,
coroutineScope = coroutineScope,
)
}
},
supportingPane = {
AnimatedPane(modifier = Modifier.preferredWidth(200.dp)) { SupportingPaneContent() }
},
extraPane = {
AnimatedPane(
modifier =
Modifier.preferredWidth(1f)
.preferredHeight(0.5f)
.background(MaterialTheme.colorScheme.surface),
dragToResizeHandle = { BottomSheetDefaults.DragHandle() },
) {
ExtraPaneContent(
extraItems = extraItems,
selectedItem = selectedItem,
scaffoldNavigator = scaffoldNavigator,
coroutineScope = coroutineScope,
)
}
},
paneExpansionState =
rememberPaneExpansionState(
keyProvider = scaffoldNavigator.scaffoldValue,
anchors = PaneExpansionAnchors,
),
paneExpansionDragHandle = { state -> PaneExpansionDragHandleSample(state) },
)
}