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>悬停时增强阴影，展开时标题栏保持原位。</AccordionContent>
    </AccordionItem>
</template>

内容区域样式

AccordionContent 的样式会自动继承父级 AccordionItem 的 variant（通过 provide/inject 同步，无需手动指定）。展开分隔线由 AccordionTrigger 底部在展开态激活，内容面板专注于内边距与次级背景层级：

变体	内容区样式特征	视觉效果
default	bg-brutal-muted	次级静音背景色，与收起态形成明暗层次
flat	bg-brutal-muted/30	柔和半透明静音色，呼应扁平化风格
ghost	无背景色	纯净透明背景，整体更简约轻盈
interactive	bg-brutal-muted hover:bg-brutal-muted/20	次级背景配合轻微悬停高亮，增强交互反馈

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

子组件

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

API 参考

Accordion

Accordion — 属性

名称	类型	默认值	说明
collapsible	boolean | undefined	— 运行时回退:未提供时使用 Reka UI AccordionRoot 的默认值 false。	单选模式下允许再次激活已展开项以关闭全部内容；多选模式不受此属性影响。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 运行时回退 未提供时使用 Reka UI AccordionRoot 的默认值 false。 组件在说明的运行条件下采用此回退值。 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
disabled	boolean | undefined	— 运行时回退:未提供时使用 Reka UI AccordionRoot 的默认值 false。	禁用整个折叠面板及其所有子项的交互。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 运行时回退 未提供时使用 Reka UI AccordionRoot 的默认值 false。 组件在说明的运行条件下采用此回退值。 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
dir	Direction | undefined	— 运行时回退:未提供时使用 Reka UI ConfigProvider 的方向，仍未设置时使用 ltr。	折叠面板的阅读方向，影响键盘导航。
详情 声明类型 Direction | undefined 字面量 "ltr" "rtl" 默认值详情 未声明默认值 — 运行时回退 未提供时使用 Reka UI ConfigProvider 的方向，仍未设置时使用 ltr。 组件在说明的运行条件下采用此回退值。 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
orientation	DataOrientation | undefined	— 运行时回退:未提供时使用 Reka UI AccordionRoot 的 vertical 方向。	折叠面板的排列与方向键导航方向。
详情 声明类型 DataOrientation | undefined 字面量 "horizontal" "vertical" 默认值详情 未声明默认值 — 运行时回退 未提供时使用 Reka UI AccordionRoot 的 vertical 方向。 组件在说明的运行条件下采用此回退值。 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
unmountOnHide	boolean | undefined	— 运行时回退:未提供时使用 Reka UI AccordionRoot 的 true 值。	控制关闭后是否卸载内容，可由子项的同名属性覆盖。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 运行时回退 未提供时使用 Reka UI AccordionRoot 的 true 值。 组件在说明的运行条件下采用此回退值。 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
asChild	boolean | undefined	—	将根原语的属性和行为合并到其子元素上。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
as	AsTag | Component | undefined	—	指定根原语渲染的元素或组件；asChild 启用时由子元素承载。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 未声明默认值 — 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
type	SingleOrMultipleType | undefined	—	指定单项或多项展开模式，优先于根据 modelValue 或 defaultValue 推断的模式。
详情 声明类型 SingleOrMultipleType | undefined 字面量 "multiple" "single" 默认值详情 未声明默认值 — 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
modelValue	string | string[] | undefined	—	受控模式下展开项的值，单选使用字符串，多选使用字符串数组，支持 v-model。
详情 声明类型 string | string[] | undefined 默认值详情 未声明默认值 — 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
defaultValue	string | string[] | undefined	—	非受控模式下初始展开项的值。
详情 声明类型 string | string[] | undefined 默认值详情 未声明默认值 — 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue
class	string | undefined	—	合并到折叠面板根元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 Accordion.vue:6 packages/ui/src/components/accordion/Accordion.vue

Accordion — 事件

名称	签名或类型	说明
@update:modelValue	[value: string | string[] | undefined]	展开项改变时发出新的值，供 v-model 同步单选或多选状态。
详情 声明类型 [value: string | string[] | undefined] 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue

Accordion — 插槽

名称	签名或类型	说明
#default	{}	折叠面板子项，通常放置 AccordionItem；此包装组件不转发底层原语的插槽参数。
详情 声明类型 {} 来源 Accordion.vue packages/ui/src/components/accordion/Accordion.vue

AccordionContent

AccordionContent — 属性

名称	类型	默认值	说明
forceMount	boolean | undefined	—	强制挂载内容，以便使用外部动画库控制其显示过渡。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
asChild	boolean | undefined	—	将内容原语的属性和行为合并到内部内容容器上。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
as	AsTag | Component | undefined	—	指定可折叠内容原语渲染的元素或组件。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 未声明默认值 — 来源 AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue
class	string | undefined	—	合并到负责折叠动画的外层内容元素；内部容器从 AccordionItem 继承视觉变体。
详情 声明类型 string | undefined 默认值详情 未声明默认值 — 来源 AccordionContent.vue:8 packages/ui/src/components/accordion/AccordionContent.vue

AccordionContent — 插槽

名称	签名或类型	说明
#default	{}	面板展开后显示的正文内容。
详情 声明类型 {} 来源 AccordionContent.vue packages/ui/src/components/accordion/AccordionContent.vue

AccordionItem

AccordionItem — 属性

名称	类型	默认值	说明
variant	"default" | "flat" | "ghost" | "interactive" | undefined	"default"	子项的视觉变体，同时传递给其触发器和内容区域。
详情 声明类型 NonNullable<"flat" | "default" | "ghost" | "interactive" | null | undefined> | undefined 字面量 "default" "flat" "ghost" "interactive" 默认值详情 声明 'default' 来源: packages/ui/src/components/accordion/AccordionItem.vue 解析值 "default" 来源 AccordionItem.vue:12 packages/ui/src/components/accordion/AccordionItem.vue
class	string | undefined	undefined	合并到折叠面板子项根元素的自定义 CSS 类。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/accordion/AccordionItem.vue 解析值 undefined 来源 AccordionItem.vue:13 packages/ui/src/components/accordion/AccordionItem.vue
disabled	boolean | undefined	—	禁用此子项；根 Accordion 禁用时此子项同样不可交互。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
value 必填	string	—	子项的唯一字符串标识，必须在同一 Accordion 内保持唯一。
详情 声明类型 string 默认值详情 未声明默认值 — 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
unmountOnHide	boolean | undefined	— 运行时回退:未提供时继承根 Accordion 的 unmountOnHide。	控制此子项关闭时是否卸载内容。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 运行时回退 未提供时继承根 Accordion 的 unmountOnHide。 组件在说明的运行条件下采用此回退值。 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
asChild	boolean | undefined	—	将子项原语的属性和行为合并到其子元素上。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue
as	AsTag | Component | undefined	—	指定子项根原语渲染的元素或组件。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 未声明默认值 — 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue

AccordionItem — 插槽

名称	签名或类型	说明
#default	{}	子项的触发器及内容，通常组合 AccordionTrigger 和 AccordionContent；不提供作用域参数。
详情 声明类型 {} 来源 AccordionItem.vue packages/ui/src/components/accordion/AccordionItem.vue

AccordionTrigger

AccordionTrigger — 属性

名称	类型	默认值	说明
asChild	boolean | undefined	—	将触发器原语的属性和行为合并到子元素上，使用时需保留触发器可聚焦语义。
详情 声明类型 boolean | undefined 字面量 false true 默认值详情 未声明默认值 — 来源 AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
as	AsTag | Component | undefined	—	指定触发器原语渲染的元素或组件。
详情 声明类型 AsTag | Component | undefined 字面量 "a" "button" "div" "form" "h2" "h3" "img" "input" "label" "li" "nav" "ol" "p" "span" "svg" "template" "ul" 默认值详情 未声明默认值 — 来源 AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
class	string | undefined	undefined	合并到触发器元素的自定义 CSS 类，不作用于外层标题元素。
详情 声明类型 string | undefined 默认值详情 声明 undefined 来源: packages/ui/src/components/accordion/AccordionTrigger.vue 解析值 undefined 来源 AccordionTrigger.vue:10 packages/ui/src/components/accordion/AccordionTrigger.vue
iconSize	IconSize | undefined	"lg"	内置 ChevronDown 图标的尺寸；自定义 icon 插槽自行设置图标大小。
详情 声明类型 IconSize | undefined 字面量 "2xl" "lg" "md" "sm" "xl" "xs" 关联类型 IconSize 类型定义 — IconSize export type IconSize = NonNullable<VariantProps<typeof iconSizeVariants>['size']> 默认值详情 声明 'lg' 来源: packages/ui/src/components/accordion/AccordionTrigger.vue 解析值 "lg" 来源 AccordionTrigger.vue:10 packages/ui/src/components/accordion/AccordionTrigger.vue

AccordionTrigger — 插槽

名称	签名或类型	说明
#default	{}	触发器中的标题文字或内容。
详情 声明类型 {} 来源 AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue
#icon	{}	替换展开图标，默认使用 ChevronDown。图标容器继承变体样式并在展开时旋转；显式空插槽会隐藏整个图标容器。
详情 声明类型 {} 来源 AccordionTrigger.vue packages/ui/src/components/accordion/AccordionTrigger.vue

可访问性

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