Supporting Pane 辅助窗格

主内容配一个辅助侧窗格（详情、筛选、相关条目）。主区域能保持最小宽度时窗格位于旁边，否则移到下方或收进侧边面板。

基础用法

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.

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SSupportingPane

标准的「辅助窗格」布局：主内容加上固定宽度的侧边窗格（详情、筛选器、相关条目）。主区域能保持 minMainWidth 时并排显示；否则窗格会移到主内容下方（compactMode: 'below'），或以底部面板的形式收起，由 SSupportingPaneTrigger 打开（'sheet'）。

窗格采用其自然高度；内容较长时请把本区块放入滚动容器（SPage）中。扩展点：controller、layoutPolicy、onWideChange、motionKey、compactMode。

属性	类型	默认值	说明
controller	SparkSupportingPaneState | undefined	undefined	你自己的状态对象（无头控制）；省略时会自动创建
compactMode	SupportingCompactMode SupportingCompactMode = 'below' | 'sheet'	'below'
paneWidth	number	0	并排显示时辅助窗格的宽度（vp，包含间距）；0 表示使用 --supporting-pane-width，否则为 320
tokens	SupportingPaneTokens	{}	实例级外观（ADR D13）：实例 → --supporting-pane-* 令牌 → 配方
minMainWidth	number	480	只有主区域保持此宽度（vp）时，窗格才会位于主区域旁边
open!!	boolean | undefined	undefined	侧边面板的打开状态（窄屏且为 'sheet' 时）
defaultOpen	boolean	false
motionKey	string	'supporting-pane'

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }
layoutPolicy	SparkSplitPolicy	sparkSupportingDefaultPolicy	根据测得的宽度决定并排（true）还是紧凑（false）（可替换）
onWideChange	(wide: boolean) => void	() => { }

插槽: 子组件（尾随闭包）

SSupportingPaneMain

插槽: 子组件（尾随闭包）

SSupportingPaneAside

辅助窗格。其 title 作为窗格的标题（若窗格位于侧边面板中，则也作为面板的标题）。

属性	类型	默认值	说明
title	ResourceStr | undefined	undefined

插槽: 子组件（尾随闭包）

SSupportingPaneTrigger

打开辅助窗格的侧边面板；除非窗格当前位于侧边面板中，否则不渲染任何内容。

属性	类型	默认值	说明
text	ResourceStr	$r('app.string.spark_details')
icon	string	'panel-right'