Collapsible 折叠面板

可以展开 / 收起面板的交互组件。

基础用法

SCollapsible() {
  Row() {
    Text('@peduarte starred 3 repositories').layoutWeight(1)
    SCollapsibleTrigger() {
      SButton({ variant: 'ghost', sizing: 'icon', icon: 'chevrons-up-down', label: 'Toggle' })
    }
  }
  Text('@radix-ui/primitives')            // always visible
  SCollapsibleContent() {
    Text('@radix-ui/colors')
    Text('@stitches/react')
  }
}

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

受控

像 v-model:open 一样用 !! 绑定 open。

@Local open: boolean = false;

SButton({ text: 'Toggle details' }).onClick(() => this.open = !this.open)
SCollapsible({ open: this.open!! }) { ... }

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

API

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

SCollapsible

shadcn-vue 的 Collapsible：一个可交互的组件，用于展开 / 收起面板。

属性	类型	默认值	说明
open!!	boolean | undefined	undefined	受控的展开状态（配合 !! 使用）。留空则为非受控。
defaultOpen	boolean	false
disabled	boolean	false	忽略触发器的点按。

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

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

SCollapsibleTrigger

点按内容区时切换折叠状态。

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

SCollapsibleContent

面板；带高度动画地展开 / 收起。

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