Collapsible
Single disclosure runtime: Root owns open, Trigger toggles, Content shows by state.
Runtime
State contracts come from @varo-ui/headless; rendered parts come from @varo-ui/h5/primitives or @varo-ui/weapp/primitives.
Demo
Basic usage
Use the Demo panel above to switch H5 and Weapp primitive preview/code; each runtime renders only the current entry.
Controlled open
Use v-model:open when routing/analytics need ownership; height animation stays in UI wrappers.
Parts
| Part | Purpose |
|---|---|
CollapsibleRoot | Open state |
CollapsibleTrigger | Toggle entry |
CollapsibleContent | Expandable content |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | undefined | Controlled open state |
defaultOpen | boolean | false | Uncontrolled initial state |
disabled | boolean | false | Disabled |
as | string | 'div' | Root element tag |
Events
| Event | Payload | Description |
|---|---|---|
update:open | boolean | Controlled sync |
openChange | boolean | Open change |
Accessibility
- Trigger controls open.
- Disabled state does not toggle.
Platform notes
- Both runtimes share the open contract.
- Motion stays outside the primitive. :::