Accordion - 手风琴

Demo

Last Changed

7 minutes ago

accordion/demo.vue

<script setup lang="ts">
const items = [
  { value: 'a', title: '什么是云乐坊 UI？', content: '以「云」与极光为灵魂的组件库，让每个子应用都属于同一片天空。' },
  { value: 'b', title: '为什么基于 reka-ui？', content: 'reka 管行为与可访问性，我们只管皮肤——省心，且无障碍达标。' },
  { 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。