‹ Split view

Types

Types

The types of split view.

SectionSplit viewDraftDocumented, not reviewed yet: the API can change.

SplitViewElement

Class

Columns side by side on iPad. On Android the primary and the secondary pane: side by side when the width takes both (a tablet, a phone in landscape); narrower, the compact layout, or without it the secondary pane over the primary one. Android has no supplementary or inspector column.

class SplitViewElement implements LayoutElement<Uses>

Member	Type	Description
displayMode	displayMode(displayMode: NonNullable<OptionsSplitView['displayMode']>): SplitViewElement<Uses>
splitBehavior	splitBehavior( splitBehavior: NonNullable<OptionsSplitView['splitBehavior']> ): SplitViewElement<Uses>
primaryColumn	primaryColumn( column: OptionsSplitViewColumn & { edge?: OptionsSplitView['primaryEdge']; background?: OptionsSplitView['primaryBackgroundStyle']; } ): SplitViewElement<Uses>
supplementaryColumn	supplementaryColumn(supplementary: OptionsSplitViewColumn): SplitViewElement<Uses>
inspectorColumn	inspectorColumn(inspector: NonNullable<OptionsSplitView['inspector']>): SplitViewElement<Uses>
displayModeButton	displayModeButton( displayModeButton: NonNullable<OptionsSplitView['displayModeButton']> ): SplitViewElement<Uses>
presentsWithGesture	presentsWithGesture(presentsWithGesture: boolean): SplitViewElement<Uses>
showsSecondaryOnlyButton	showsSecondaryOnlyButton(showsSecondaryOnlyButton: boolean): SplitViewElement<Uses>
compactTopColumn	compactTopColumn( compactTopColumn: NonNullable<OptionsSplitView['compactTopColumn']> ): SplitViewElement<Uses>
ios	ios(build: (split: SplitViewElement<Uses>) => SplitViewElement<Uses>): SplitViewElement<Uses>	Modifiers for iOS only.
android	android( build: (split: SplitViewElement<Uses>) => SplitViewElement<Uses> ): SplitViewElement<Uses>	Modifiers for Android only.
options	options(options: OptionsSplitView): SplitViewElement<Uses>	Options of the split view no modifier covers. The options of screens go on the screens.

Defined in src/api/layout/SplitView.ts ↗

SplitViewColumns

Interface

The columns of a split view; a screen alone, by name or Screen(…), gets a stack, but in the inspector.

interface SplitViewColumns

Member	Type	Description
primaryRequired	LayoutContent
secondaryRequired	LayoutContent
supplementary	LayoutContent	The middle column (iOS).
inspector	LayoutContent	The column at the trailing edge (iOS 26+).
compact	LayoutContent	What an iPhone, a narrow window and a narrow Android screen show.

Defined in src/api/layout/SplitView.ts ↗

ColumnConfig

Interface

How showInColumn shows a screen.

interface ColumnConfig

Member	Type	Description
column	'secondary' | 'supplementary'	The column: 'secondary', the one beside the sidebar, or 'supplementary', the middle one of three. Android has the secondary column only.
options	ScreenOptionsInput<object>	Options of the screen for this show, over those of its definition.

Defined in src/api/commands/presentation.ts ↗

SplitColumn

Type

A column of a split view that the app shows and hides.

type SplitColumn = 'primary' | 'supplementary' | 'inspector'

Defined in src/api/commands/commands.ts ↗

SplitViewDisplayModeChangedEvent

Type

type SplitViewDisplayModeChangedEvent = NavigationEvents['splitViewDisplayModeChanged']

Member	Type	Description
componentIdRequired	string	The id of the split view.
displayModeRequired	SplitViewDisplayMode	The mode the columns are shown in.
inspectorVisible	boolean	(iPadOS 26+) Whether the inspector column is visible. Set only for a split view that has an inspector.

Defined in src/api/events/navigationEvents.ts ↗