Sheet 侧边面板

扩展自 Dialog，用于显示补充屏幕主内容的内容。

基础用法

SSheet() {
  SSheetTrigger() { SButton({ text: 'Open', variant: 'outline' }) }
  SSheetContent({ side: 'right' }) {
    SSheetHeader() {
      SSheetTitle({ text: 'Edit profile' })
      SSheetDescription({ text: 'Make changes to your profile here.' })
    }
    TextInput({ placeholder: 'Name' })
    SSheetFooter() {
      SSheetClose() { SButton({ text: 'Save changes' }) }
    }
  }
}

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

API

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

SSheet

shadcn-vue 的 Sheet：从屏幕边缘滑入的对话框。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

事件	类型	默认值	说明
onOpenChange	(open: boolean) => void	() => { }

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

SSheetTrigger

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

SSheetClose

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

SSheetContent

边缘面板：bg-background shadow-lg，左右两侧为 w-3/4 sm:max-w-sm，从 side 方向滑入。

属性	类型	默认值	说明
side	SheetSide SheetSide = 'top' | 'right' | 'bottom' | 'left'	'right'
showCloseButton	boolean	true
dismissOnOutside	boolean	true
panelWidth	number	0	左侧 / 右侧面板的宽度，单位 vp（默认为窗口宽度的 75%，最大 384）。
tokens	SparkSurfaceTokens	{}	实例级表面令牌覆盖（实例 → 主题令牌 → 配方），参见 {@link SparkSurfaceTokens}。

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

SSheetHeader

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

SSheetFooter

操作区域。在左侧 / 右侧面板中会被推到底部（shadcn 的 mt-auto）。

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

SSheetTitle

属性	类型	默认值	说明
text	ResourceStr	''

SSheetDescription

属性	类型	默认值	说明
text	ResourceStr	''