Collapse 折叠面板

Collapse 把若干 CollapseItem 叠在一起：每一项有一个标题栏，点击展开或收起下面的内容。内容高度的动画由 CSS 完成。

#演示

#基础用法

各项独立展开和收起。defaultExpandedNames 指定初始展开的项。

#手风琴

accordion 最多只展开一项：展开一项会收起其他项。

#箭头位置

arrowPlacement="right" 把箭头放在标题之后。

#受控

用 expandedNames 和 onUpdateExpandedNames 把展开的项放进你自己的 state。

#标题栏额外内容

headerExtra 在标题栏末尾放额外内容，比如计数或时间。

#自定义箭头

arrow 替换默认的箭头。它和 title、headerExtra 一样，可以是节点，也可以是接收 { collapsed } 的函数；设在 Collapse 上则对所有项生效。自定义箭头不会旋转。

#禁用

disabled 的项无法展开或收起。

#触发区域

triggerAreas 决定点击标题栏的哪些部分会切换：main（标题）、arrow 和 extra。标题栏始终是按钮，所以 Enter 和 Space 总能切换。

#渲染方式

displayDirective="if"（默认）在收起完成后卸载内容；show 只隐藏内容、保持挂载，因此内容的状态会保留。

#嵌套

#无障碍

每个标题栏遵循 WAI-ARIA accordion 模式：一个标题（role="heading"，aria-level="3"）里放一个原生 button，带 aria-expanded 和 aria-controls；内容是 role="region"，由这个按钮标注。Tab 在标题栏之间移动，Enter 或 Space 切换。收起的内容是 visibility: hidden，不在 Tab 顺序和无障碍树里。开启 prefers-reduced-motion 时展开和收起没有动画。

#Collapse Props

#CollapseItem Props

两个组件都接受原生 div 属性和 ref。标题部分是 title、headerExtra 和 arrow 属性，内容是 children。onUpdateExpandedNames 总是收到数组。