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

安装

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

基础用法

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

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。

相关文档