手风琴 (Accordion)

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

基础用法

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

Example

多面板同时展开

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

Example

主题定制

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

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

Example

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 使用默认插槽来放置面板内容。