Collapsible

An interactive component which expands/collapses a panel.

Usage

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')
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

Controlled

Bind open with !! like v-model:open.

@Local open: boolean = false;

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

Approximate web preview — the HarmonyOS rendering is the reference.

API

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

SCollapsible

shadcn-vue Collapsible: an interactive component which expands / collapses a panel.

Prop	Type	Default	Description
open!!	boolean | undefined	undefined	Controlled open state (use with !!). Leave undefined for uncontrolled.
defaultOpen	boolean	false
disabled	boolean	false	Ignore trigger taps.

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SCollapsibleTrigger

Toggles the collapsible when its content is tapped.

Slots: children (trailing closure)

SCollapsibleContent

The panel; expands / collapses with a height animation.

Slots: children (trailing closure)