Accordion - 手风琴

更新日期

2026-10-04 UTC

Demo

accordion/demo.vue

<script setup lang="ts">
const items = [
  { value: 'a', title: '什么是云乐坊设计系统？', content: '云乐坊设计系统，统一设计规范、品牌视觉与 UI 实现；默认晴空蓝为主，高饱和纯色点缀。' },
  { value: 'b', title: '为什么基于 reka-ui？', content: 'Reka UI 提供键盘、焦点和 ARIA 行为，云乐坊提供产品接口与主题；封装后的场景仍需逐项验收。' },
  { value: 'c', title: '支持暗色吗？', content: '晴空白与深蓝夜空两套中性色，token 驱动，零配置随主题切换。' },
]
</script>

<template>
  <YlfAccordion :items="items" />
</template>

手风琴：展开/收起、键盘导航、单开/多开基于 reka-ui，高度过渡与外观走 token。

Props

属性	说明	类型	默认值
v-model	展开项	string | string[]	—
items	列表 { value, title, content?, disabled? }	AccordionItemData[]	—
type	单开 / 多开	single | multiple	single
collapsible	单开模式允许全部收起	boolean	true

Slots

每项内容可用 value 同名插槽覆盖 content。

items 支持只读数组。单开模式全部收起时值为 undefined，多开模式为字符串数组；调用方应允许收起状态。方向键、Home / End 在标题间移动焦点，跳过禁用项。