Accordion 折叠面板

可折叠的面板列表，适用于展示常见问题解答（FAQ）、详细条款或分步信息折叠。基于 Radix Vue 无头原语构建，支持多种粗野主义视觉变体。

预览

Preview

默认

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。它具有高对比度的边框、实心阴影、大胆的配色以及极具物理触感的交互设计。

扁平

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。

幽灵

BrutxUI 是一个面向 Vue 3 + Tailwind CSS 的 Neo-Brutalist（新粗野主义）风格 UI 组件库。

交互（interactive）

整个面板会出现阴影放大与位移，内容区也会带有轻微高亮，强化可点击的物理反馈。

安装

pnpm dlx brutx-vue@latest add accordion

用法

<script setup>
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'brutx-ui-vue'
</script>

<template>
    <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
            <AccordionTrigger>这里是面板标题 1</AccordionTrigger>
            <AccordionContent>
                这里是折叠面板内容 1。
            </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
            <AccordionTrigger>这里是面板标题 2</AccordionTrigger>
            <AccordionContent>
                这里是折叠面板内容 2。
            </AccordionContent>
        </AccordionItem>
    </Accordion>
</template>

变体

可以使用 AccordionItem 的 variant 属性来设置不同的粗野主义风格：

变体	说明
default	默认带有黑粗边框和右下方偏移实心阴影
flat	仅带有黑粗边框，无任何投影效果
ghost	透明背景，无边框和阴影，简约展示
interactive	在悬停时拥有阴影放大和位移，交互感更强

<template>
    <AccordionItem value="item" variant="interactive">
        <AccordionTrigger>交互式折叠子项</AccordionTrigger>
        <AccordionContent>Hover 看看！有悬停偏移效果。</AccordionContent>
    </AccordionItem>
</template>

内容区域样式

AccordionContent 的样式会自动继承父级 AccordionItem 的 variant（通过 provide/inject 同步，无需手动指定）。所有变体共享基础类 border-t-3 border-brutal p-6 bg-brutal-bg text-brutal-fg，再按下表叠加差异样式：

变体	内容区差异样式	视觉效果
default	（无附加样式）	顶部黑色粗分隔线 + 默认背景色
flat	bg-brutal-muted/30	背景替换为半透明静音色，呼应扁平化风格
ghost	border-transparent	顶部边框透明，整体更简约轻盈
interactive	hover:bg-brutal-muted/20	鼠标悬停时内容区出现轻微高亮，增强交互反馈

说明：变体同时作用于 AccordionItem（容器）、AccordionTrigger（触发器）与 AccordionContent（内容区）三层，保持整体视觉一致。

子组件

组件	说明
Accordion	根容器，管理展开状态和模式
AccordionItem	单个面板子项，包含触发器和内容
AccordionTrigger	面板触发器，点击切换展开/折叠
AccordionContent	面板内容区域，展开时显示

Props

Accordion

属性	类型	默认值	说明
type	'single' | 'multiple'	—	展开模式，单选或多选
collapsible	boolean	false	在 type="single" 模式下是否允许关闭全部子项
disabled	boolean	false	是否禁用整个折叠面板
modelValue	string | string[]	—	当前选中的面板值，支持 v-model 双向绑定
defaultValue	string | string[]	—	非受控模式下的默认选中值
dir	'ltr' | 'rtl'	'ltr'	阅读方向
orientation	'vertical' | 'horizontal'	'vertical'	折叠面板排列方向
unmountOnHide	boolean	true	关闭时是否卸载内容 DOM
class	string	—	自定义类名

AccordionItem

属性	类型	默认值	说明
value	string	—	唯一的标示值（必填）
variant	'default' | 'flat' | 'ghost' | 'interactive'	'default'	视觉风格变体
disabled	boolean	false	是否禁用此子项
class	string	—	自定义类名

AccordionTrigger

属性	类型	默认值	说明
iconSize	'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'	'lg'	展开/折叠图标的尺寸
class	string	—	自定义类名

AccordionContent

属性	类型	默认值	说明
forceMount	boolean	—	强制挂载内容，用于配合外部动画库控制动画
class	string	—	自定义类名

事件

事件	参数	说明
update:modelValue	value: string | string[] | undefined	展开状态改变时触发，支持 v-model

插槽

插槽	作用域	说明
Accordion#default	—	折叠面板内容，通常包含 AccordionItem
AccordionItem#default	—	面板子项内容，通常包含 AccordionTrigger 和 AccordionContent
AccordionTrigger#default	—	触发器文本内容
AccordionTrigger#icon	—	自定义展开/折叠图标，默认为 ChevronDown
AccordionContent#default	—	面板展开后显示的内容

可访问性

• 键盘操作：支持 Space / Enter 触发展开/折叠，方向键在面板间导航
• ARIA 属性：自动管理 aria-expanded、aria-controls、role="region" 等
• 焦点管理：Tab 键聚焦触发器，焦点顺序与面板顺序一致