手风琴 (Accordion)

垂直堆叠的交互式标题集合，点击可展开或折叠其内容。

组件特性

🎛️ 单选/多选模式：支持 single 单选展开和 multiple 多选同时展开两种模式。
🔄 完全可控：通过 v-model 或 defaultValue 控制展开状态。
⚡ 懒渲染：支持 lazyRender，内容仅在展开时渲染。
♿️ 无障碍支持：开箱即用的键盘导航和屏幕阅读器兼容。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

基础的手风琴模式，每次仅允许展开一个面板。使用 type="single"，添加 collapsible 允许折叠已展开的面板。

<script setup lang="ts">
import { ref } from 'vue'
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent
} from '@breezeui/vue'

const singleValue = ref('item-1')
</script>

<template>
  <BrAccordion v-model="singleValue" type="single" collapsible class="w-full">
    <BrAccordionItem value="item-1">
      <BrAccordionTrigger>Is it accessible?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It adheres to the WAI-ARIA design pattern.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-2">
      <BrAccordionTrigger>Is it styled?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It comes with default styles that matches the other components' aesthetic.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-3">
      <BrAccordionTrigger>Is it animated?</BrAccordionTrigger>
      <BrAccordionContent>
        Yes. It's animated by default, but you can disable it if you prefer.
      </BrAccordionContent>
    </BrAccordionItem>
  </BrAccordion>
</template>

多面板同时展开

设置 type="multiple" 以支持同时展开多个面板。

<script setup lang="ts">
import { ref } from 'vue'
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent
} from '@breezeui/vue'

const multipleValue = ref(['item-1', 'item-2'])
</script>

<template>
  <BrAccordion v-model="multipleValue" type="multiple" class="w-full">
    <BrAccordionItem value="item-1">
      <BrAccordionTrigger>Section 1</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 1.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-2">
      <BrAccordionTrigger>Section 2</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 2.
      </BrAccordionContent>
    </BrAccordionItem>
    <BrAccordionItem value="item-3">
      <BrAccordionTrigger>Section 3</BrAccordionTrigger>
      <BrAccordionContent>
        You can expand multiple sections at the same time. This is section 3.
      </BrAccordionContent>
    </BrAccordionItem>
  </BrAccordion>
</template>

主题定制

全局配置 (BrConfigProvider) 与局部覆盖

你可以通过 BrConfigProvider 的 theme 属性覆盖默认的 CSS 变量，或者使用 TailwindCSS 的 class 直接覆盖默认样式。

<script setup lang="ts">
import {
  BrAccordion,
  BrAccordionItem,
  BrAccordionTrigger,
  BrAccordionContent,
  BrConfigProvider
} from '@breezeui/vue'

const customTheme = {
  border: '#8b5cf6', // Violet-500
  primary: '#8b5cf6'
}
</script>

<template>
  <div class="space-y-8 w-full">
    <!-- Using BrConfigProvider -->
    <BrConfigProvider :theme="customTheme">
      <BrAccordion type="single" collapsible class="w-full">
        <BrAccordionItem value="item-1">
          <BrAccordionTrigger>Global Theme Override</BrAccordionTrigger>
          <BrAccordionContent>
            The border and primary colors are overridden using BrConfigProvider.
          </BrAccordionContent>
        </BrAccordionItem>
      </BrAccordion>
    </BrConfigProvider>

    <!-- Using TailwindCSS Classes -->
    <BrAccordion type="single" collapsible class="w-full">
      <BrAccordionItem value="item-1" class="border-b-2 border-dashed border-red-500">
        <BrAccordionTrigger class="hover:text-red-500 hover:no-underline text-lg group">
          Custom Class Override
          <template #icon>
            <div class="w-5 h-5 rounded-full bg-red-100 text-red-500 flex items-center justify-center shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180">
              ↓
            </div>
          </template>
        </BrAccordionTrigger>
        <BrAccordionContent class="text-red-600 bg-red-50 p-4 rounded-b-lg">
          This section uses custom background, border, padding, and slot to override the default arrow icon.
        </BrAccordionContent>
      </BrAccordionItem>
    </BrAccordion>
  </div>
</template>

API

BrAccordion 属性

属性	类型	默认值	说明
type	`'single' \| 'multiple'`	`'single'`	折叠面板的模式，单选或多选。
modelValue / v-model	`string \| string[]`	-	当前展开的面板的值。
defaultValue	`string \| string[]`	-	默认展开的面板的值。
collapsible	`boolean`	`false`	单选模式下，是否允许点击已展开的触发器来关闭面板。
disabled	`boolean`	`false`	是否禁用整个折叠面板。

BrAccordionItem 属性

属性	类型	默认值	说明
value	`string`	-	(必填) 当前面板的唯一标识符。
disabled	`boolean`	`false`	是否禁用当前面板。

BrAccordionTrigger 属性

属性	类型	默认值	说明
icon	`string \| Component`	-	替换默认的向下箭头图标。
hideIcon	`boolean`	`false`	是否隐藏右侧图标。

插槽

BrAccordionTrigger 支持 #icon 插槽用于完全自定义右侧图标。
BrAccordionContent 使用默认插槽来放置面板内容。

#手风琴 (Accordion)

#组件特性

#基础用法

#多面板同时展开

#主题定制

#全局配置 (BrConfigProvider) 与局部覆盖

#API

#BrAccordion 属性

#BrAccordionItem 属性

#BrAccordionTrigger 属性

#插槽