Drawer 抽屉

从底部滑出的抽屉。向下拖动可关闭：拖过自身高度的 30% 后松手或快速下滑即关闭，否则回弹。

基础用法

SDrawer({ open: this.open!! }) {
  SDrawerTrigger() { SButton({ text: 'Open Drawer', variant: 'outline' }) }
  SDrawerContent() {
    SDrawerHeader() {
      SDrawerTitle({ text: 'Move Goal' })
      SDrawerDescription({ text: 'Set your daily activity goal.' })
    }
    ...
    SDrawerFooter() {
      SButton({ text: 'Submit' })
      SDrawerClose() { SButton({ text: 'Cancel', variant: 'outline' }) }
    }
  }
}

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

API

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

SDrawer

shadcn-vue 的 Drawer（vaul）：带拖动手柄的底部面板，可向下拖动以关闭。

向下拖动面板时它会跟随手指；松开时若超过其高度的 30%（或向下快速甩动）则关闭，否则回弹（动效 key 为 'drawer'）。

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

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

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

SDrawerTrigger

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

SDrawerClose

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

SDrawerContent

抽屉面板（bg-background rounded-t-lg border-t max-h-[80vh]，加上手柄 mt-4 h-2 w-[100px] rounded-full bg-muted），以浮层宿主中的底部面板形式呈现。

属性	类型	默认值	说明
dismissOnOutside	boolean	true
dragToDismiss	boolean	true	允许拖动关闭
tokens	DrawerTokens	{}	实例级面板令牌（实例 → --drawer-* 令牌 → 配方），参见 {@link DrawerTokens}

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

SDrawerHeader

flex flex-col gap-1.5 p-4；紧凑窗口下文字居中（shadcn：text-center md:text-left）。

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

SDrawerFooter

mt-auto flex flex-col gap-2 p-4。

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

SDrawerTitle

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

SDrawerDescription

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