Skip to content

Accordion ​

手风琴运行时:Root 支持 single/multiple,Item 提供唯一 value,Trigger/Content 组成条目。

运行时 ​

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

演示 ​

安装包@varo-ui/headless
Body one

基础用法 ​

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

multiple 模式 ​

type="multiple" 时 value 为数组;Item value 必须唯一。

Parts ​

Part作用
AccordionRoot集合状态
AccordionItem单个条目
AccordionTrigger条目标题
AccordionContent条目内容

Props ​

AccordionRoot ​

Prop类型默认值描述
type'single' | 'multiple'实现默认单开/多开
valuestring | string[] | undefinedundefined受控值
defaultValuestring | string[]undefined非受控初始值
collapsiblebooleanfalsesingle 下是否可全部折叠
disabledbooleanfalse整组禁用
idstringundefined关联 id

AccordionItem ​

Prop类型描述
valuestring唯一条目值
disabledboolean条目禁用

Events ​

EventPayload描述
update:valuestring | string[]受控同步
valueChangestring | string[]值变化

无障碍 ​

  • Item value 关联 Trigger/Content。
  • disabled item 不可展开。

平台差异

  • 双端共享 single/multiple 契约。
  • 动画与图标属于 UI wrapper。 :::