Collapsible 折叠面板

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

组件特性

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

基础用法

最基础的折叠面板展示。

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible v-model:open="isOpen">
      <BrCollapsibleTrigger>
        Can I use this in my project?
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        Yes. Free to use for personal and commercial projects. No attribution
        required.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

尺寸

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

<script setup lang="ts">
</script>

<template>
  <div class="flex flex-col gap-4 w-full max-w-[400px]">
    <BrCollapsible size="sm">
      <BrCollapsibleTrigger>
        Small Size
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a small size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>

    <BrCollapsible size="md">
      <BrCollapsibleTrigger>
        Medium Size (Default)
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a medium size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>

    <BrCollapsible size="lg">
      <BrCollapsibleTrigger>
        Large Size
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This is a large size collapsible component.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

自定义图标

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

<script setup lang="ts">
import { ArrowDown } from 'lucide-vue-next'
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible>
      <BrCollapsibleTrigger>
        Custom Icon
        <template #icon>
          <ArrowDown class="h-4 w-4 shrink-0 transition-transform duration-300" />
        </template>
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        You can customize the icon using the icon slot in BrCollapsibleTrigger.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

禁用状态

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

<script setup lang="ts">
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrCollapsible disabled>
      <BrCollapsibleTrigger>
        Disabled Collapsible
      </BrCollapsibleTrigger>
      <BrCollapsibleContent>
        This content cannot be expanded because the component is disabled.
      </BrCollapsibleContent>
    </BrCollapsible>
  </div>
</template>

主题定制

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

<script setup lang="ts">
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <div class="w-full max-w-[400px]">
    <BrConfigProvider
      :theme="{
        cssVars: {
          light: {
            '--br-radius': '1rem',
            '--br-primary': '262.1 83.3% 57.8%',
            '--br-border': '262.1 83.3% 80%',
            '--br-muted': '262.1 83.3% 95%',
          },
          dark: {
            '--br-radius': '1rem',
            '--br-primary': '262.1 83.3% 57.8%',
            '--br-border': '262.1 83.3% 30%',
            '--br-muted': '262.1 83.3% 20%',
          }
        }
      }"
    >
      <BrCollapsible v-model:open="isOpen" class="border-2 border-primary/20 shadow-md">
        <BrCollapsibleTrigger class="hover:bg-primary/10 data-[state=open]:bg-primary/5">
          <span class="text-primary font-bold">Themed Collapsible</span>
        </BrCollapsibleTrigger>
        <BrCollapsibleContent class="bg-primary/5 border-t-primary/20">
          This collapsible uses a custom theme provided by BrConfigProvider, 
          along with some specific Tailwind classes to match the theme.
        </BrCollapsibleContent>
      </BrCollapsible>
    </BrConfigProvider>
  </div>
</template>

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`	-	是否强制挂载内容（配合动画使用时）

#Collapsible 折叠面板

#组件特性

#基础用法

#尺寸

#自定义图标

#禁用状态

#主题定制

#API 说明

#BrCollapsible

#BrCollapsibleTrigger

#BrCollapsibleContent