Skip to content

Collapsible

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

运行时

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

演示

安装包@varo-ui/headless

安装

bash
pnpm add @varo-ui/headless @varo-ui/h5
# 或
pnpm add @varo-ui/headless @varo-ui/weapp

基础用法

通过上方演示面板切换 H5 实时预览,以及小程序运行时契约/代码。

受控展开

需要和路由/埋点同步时使用 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。

相关文档