Accordion 手风琴

一组纵向排列的可交互标题，每个标题展开一段内容。

基础用法

SAccordion({ type: 'single', collapsible: true, defaultValue: ['item-1'] }) {
  SAccordionItem({ value: 'item-1' }) {
    SAccordionTrigger({ text: 'Is it accessible?' })
    SAccordionContent() { Text('Yes. It adheres to the WAI-ARIA design pattern.') }
  }
  SAccordionItem({ value: 'item-2' }) {
    SAccordionTrigger({ text: 'Is it styled?' })
    SAccordionContent() { Text('Yes. It comes with default styles that match the other components.') }
  }
  SAccordionItem({ value: 'item-3' }) {
    SAccordionTrigger({ text: 'Is it animated?' })
    SAccordionContent() { Text('Yes. It is animated by default.') }
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

多项展开与受控

type: 'multiple' 允许同时展开多项。用 !! 绑定展开的项。

@Local open: string[] = ['shipping'];

SAccordion({ type: 'multiple', value: this.open!! }) {
  SAccordionItem({ value: 'shipping' }) { ... }
  SAccordionItem({ value: 'returns' }) { ... }
  SAccordionItem({ value: 'support', disabled: true }) { ... }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SAccordion

shadcn-vue 的 Accordion：一组纵向堆叠的可交互标题，每个标题展开对应的一段内容。

value 始终为字符串数组（type: 'single' 时也是如此，此时最多只包含一项）。

属性	类型	默认值	说明
type	AccordionType AccordionType = 'single' | 'multiple'	'single'
collapsible	boolean	false	仅适用于 single：允许再次点击已展开的项来将其收起。
value!!	string[] | undefined	undefined	受控的展开项（配合 !! 使用）。留空则为非受控。
defaultValue	string[]	[]

事件	类型	默认值	说明
onValueChange	(value: string[]) => void	() => { }

插槽: 子组件（尾随闭包）

SAccordionItem

单个分区：border-b last:border-b-0。

属性	类型	默认值	说明
value	string	''
disabled	boolean	false

插槽: 子组件（尾随闭包）

SAccordionTrigger

标题行：flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-sm font-medium hover:underline，展开时带有旋转 180° 的箭头。点击即可切换该项。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined

插槽: 子组件（尾随闭包）

SAccordionContent

可折叠的内容区（pt-0 pb-4 text-sm），带高度动画。

插槽: 子组件（尾随闭包）