Supporting Pane

Main content with a supporting side pane (details, filters, related items). The pane sits beside the content when the main area keeps its minimum width, and otherwise moves below it or into a sheet.

Usage

SSupportingPane({ compactMode: 'sheet', paneWidth: 300 }) {
  SSupportingPaneMain() {
    SSupportingPaneTrigger({ text: 'Details' })  // only shown while the pane lives in a sheet
    Article()
  }
  SSupportingPaneAside({ title: 'Details' }) {
    Properties()
  }
}
// compactMode 'below': the pane stacks under the main content when narrow.

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSupportingPane

Canonical "supporting pane" layout: main content plus a fixed-width side pane (details, filters, related items). Side by side when the main area keeps minMainWidth; otherwise the pane moves below the main content (compactMode: 'below') or into a bottom sheet opened by SSupportingPaneTrigger ('sheet').

Panes take their natural height; put the block inside a scroller (SPage) for long content. Extension points: controller, layoutPolicy, onWideChange, motionKey, compactMode.

Prop	Type	Default	Description
controller	SparkSupportingPaneState | undefined	undefined	your own state object (headless control); one is created when omitted
compactMode	SupportingCompactMode SupportingCompactMode = 'below' | 'sheet'	'below'
paneWidth	number	0	supporting pane width when side by side (vp, includes the gap); 0 = --supporting-pane-width, else 320
tokens	SupportingPaneTokens	{}	per-instance look (ADR D13): instance → --supporting-pane-* tokens → recipe
minMainWidth	number	480	the pane sits beside the main area only while the main area keeps this width (vp)
open!!	boolean | undefined	undefined	sheet open state (narrow + 'sheet')
defaultOpen	boolean	false
motionKey	string	'supporting-pane'

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }
layoutPolicy	SparkSplitPolicy	sparkSupportingDefaultPolicy	side by side (true) or compact (false), from the measured width (replaceable)
onWideChange	(wide: boolean) => void	() => { }

Slots: children (trailing closure)

SSupportingPaneMain

Slots: children (trailing closure)

SSupportingPaneAside

The supporting pane. Its title heads the pane (and the sheet when it is one).

Prop	Type	Default	Description
title	ResourceStr | undefined	undefined

Slots: children (trailing closure)

SSupportingPaneTrigger

Opens the supporting pane's sheet; renders nothing unless the pane currently lives in a sheet.

Prop	Type	Default	Description
text	ResourceStr	$r('app.string.spark_details')
icon	string	'panel-right'