Skip to content

Collapsible ​

单个展开区域运行时:Root 持有 open,Trigger 切换,Content 按状态显隐。

运行时 ​

状态契约由 @varo-ui/headless 提供;渲染 Parts 分别来自 @varo-ui/h5/primitives 与 @varo-ui/weapp/primitives。

演示 ​

安装包@varo-ui/headless

基础用法 ​

通过上方演示面板切换 H5 与 Weapp primitive 预览/代码;每个运行时只渲染当前条目。

受控展开 ​

需要和路由/埋点同步时使用 v-model:open;高度动画放在 UI wrapper。

Parts ​

Part作用
CollapsibleRootopen 状态
CollapsibleTrigger切换入口
CollapsibleContent可展开内容

Props ​

Prop类型默认值描述
openboolean | undefinedundefined受控展开态
defaultOpenbooleanfalse非受控初始态
disabledbooleanfalse禁用
asstring'div'根节点标签

Events ​

EventPayload描述
update:openboolean受控同步
openChangeboolean展开态变化

无障碍 ​

  • Trigger 控制 open。
  • disabled 时不切换。

平台差异

  • 双端共享 open 契约。
  • 动画与过渡不进入 primitive。 :::