Collapsible 折叠面板

一个可以展开/折叠内容的交互式面板组件，基于 Radix Vue 实现。

组件特性

• 🛠️ 完全可控：轻松控制组件的展开和折叠状态。
• 📐 多种尺寸：全面支持 xs、sm、md、lg、xl、2xl 及 default 尺寸，适应不同场景。
• 🎨 高度定制：可轻松替换默认图标或自定义触发器内容。
• ⌨️ 无障碍支持：开箱即用的全键盘操作支持和屏幕阅读器兼容。
• 🎭 主题定制：完全支持基于 BrConfigProvider 的全局主题配置。

基础用法

最基础的折叠面板展示。

Example

尺寸

通过 size 属性可以调整折叠面板的尺寸。支持全局配置体系的所有尺寸 (xs, sm, md, lg, xl, 2xl, default)。

Example

自定义图标

使用 BrCollapsibleTrigger 上的 icon 插槽可以自定义展开/折叠的图标。

Example

禁用状态

使用 disabled 属性可以禁用折叠面板的交互。

Example

主题定制

结合 BrConfigProvider，可以全局覆盖组件默认样式。

Example

API 说明

BrCollapsible

属性	类型	默认值	说明
open (v-model)	boolean	-	控制折叠面板的展开状态
defaultOpen	boolean	false	初始渲染时的默认展开状态
disabled	boolean	false	是否禁用
size	'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'default'	折叠面板的尺寸
lazyRender	boolean	true	是否在展开时才渲染内容（懒渲染）

BrCollapsibleTrigger

属性	类型	默认值	说明
asChild	boolean	false	是否将当前组件作为子元素的包装器
hideIcon	boolean	false	是否隐藏默认的展开/折叠图标

BrCollapsibleContent

属性	类型	默认值	说明
asChild	boolean	false	是否将当前组件作为子元素的包装器
forceMount	boolean	-	是否强制挂载内容（配合动画使用时）