ListDetailPaneScaffold

A three pane layout that follows the Material guidelines, displaying the provided panes in a canonical list-detail layout.

Common

@ExperimentalMaterial3AdaptiveApi
@Composable
fun ListDetailPaneScaffold(
    directive: PaneScaffoldDirective,
    value: ThreePaneScaffoldValue,
    listPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    detailPane: @Composable ThreePaneScaffoldPaneScope.() -> Unit,
    modifier: Modifier = Modifier,
    extraPane: (@Composable ThreePaneScaffoldPaneScope.() -> Unit)? = null,
    paneExpansionDragHandle: (@Composable ThreePaneScaffoldScope.(PaneExpansionState) -> Unit)? =
        null,
    paneExpansionState: PaneExpansionState? = null,
)

A three pane layout that follows the Material guidelines, displaying the provided panes in a canonical list-detail layout.

This overload takes a ThreePaneScaffoldValue describing the adapted value of each pane within the scaffold.

Here's a basic usage sample, which demonstrates how a layout can change from single pane to dual pane under different window configurations:

For a more sophisticated sample that supports an extra pane and pane expansion functionality that allows users to drag to change layout split, see:

By default there isn't a drag handle rendered so users aren't able to drag to change the pane split. Providing a drag handle like the above sample shows will enable the functionality. We suggest developers to use the vertical drag handle implementation provided by the Material3 component library here to have default theming/styling support. You can integrate the component as the following sample shows:

Note that if there's no drag handle, you can still modify paneExpansionState directly to apply pane expansion.

The following code gives a sample of how to integrate with the Compose Navigation library:

Parameters


directive	The top-level directives about how the scaffold should arrange its panes.
value	The current adapted value of the scaffold, which indicates how each pane of the scaffold is adapted.
listPane	the list pane of the scaffold, which is supposed to hold a list of item summaries that can be selected from, for example, the inbox mail list of a mail app. See `ListDetailPaneScaffoldRole.List`. Note that we suggest you to use AnimatedPane as the root layout of panes, which supports default pane behaviors like enter/exit transitions.
detailPane	the detail pane of the scaffold, which is supposed to hold the detailed info of a selected item, for example, the mail content currently being viewed. See `ListDetailPaneScaffoldRole.Detail`. Note that we suggest you to use AnimatedPane as the root layout of panes, which supports default pane behaviors like enter/exit transitions.
modifier	Modifier of the scaffold layout.
extraPane	the extra pane of the scaffold, which is supposed to hold any supplementary info besides the list and the detail panes, for example, a task list or a mini-calendar view of a mail app. See `ListDetailPaneScaffoldRole.Extra`. Note that we suggest you to use AnimatedPane as the root layout of panes, which supports default pane behaviors like enter/exit transitions.
paneExpansionDragHandle	the pane expansion drag handle to allow users to drag to change pane expansion state, `null` by default.
paneExpansionState	the state object of pane expansion; when no value is provided but `paneExpansionDragHandle` is not `null`, a default implementation will be created for the drag handle to use.