Flowbite 折叠面板（Collapse）使用指南

在前端开发中，折叠面板（Collapse） 是常见的 UI 交互组件，用于隐藏和显示内容。 Flowbite 提供了基于 Tailwind CSS + JavaScript 的 Collapse 组件，可以通过 data-* 属性或 JavaScript 手动初始化实现。

1. 基础用法（data 属性方式）

Flowbite 内置了基于 data-* 属性的自动初始化，你只需要在按钮和内容区域写好对应的属性即可。

<!-- 触发按钮 -->
<button 
  class="px-4 py-2 text-white bg-blue-600 rounded"
  data-collapse-toggle="collapseExample"
  type="button"
>
  Toggle Collapse
</button>

<!-- 折叠面板 -->
<div id="collapseExample" class="hidden">
  <div class="p-4 border border-gray-200 rounded-lg shadow">
    这里是折叠内容，默认隐藏
  </div>
</div>

📌 说明：

• data-collapse-toggle="collapseExample" 表示按钮与折叠区域绑定。
• 内容区 id="collapseExample" 对应按钮的 data-collapse-toggle。
• 默认 hidden 表示内容处于折叠状态。
• Flowbite JS 会自动监听按钮点击并切换内容显隐。

2. 手动初始化（JavaScript 方式）

如果你需要在 Vue、React 或动态生成 DOM 的场景下控制 Collapse，可以使用 Flowbite 提供的 Collapse 类手动初始化。

<!-- 按钮 -->
<button id="toggleBtn" class="px-4 py-2 text-white bg-blue-600 rounded">
  Toggle Collapse
</button>

<!-- 折叠内容 -->
<div id="contentBox" class="hidden">
  <div class="p-4 border border-gray-200 rounded-lg shadow">
    手动初始化的折叠内容
  </div>
</div>

<script type="module">
  import { Collapse } from 'flowbite'

  const $targetEl = document.getElementById('contentBox')
  const $triggerEl = document.getElementById('toggleBtn')

  // 初始化 Collapse
  const collapse = new Collapse($targetEl, $triggerEl)

  // 你也可以手动控制
  // collapse.show()
  // collapse.hide()
  // collapse.toggle()
</script>

3. 注意事项

1. data 属性方式

   • 适合静态页面，Flowbite 会自动初始化。
   • 写法更简洁，推荐优先使用。

2. JS 手动方式

   • 适合 Vue/React 等框架，或动态生成 DOM 的场景。
   • 可以精确控制显隐逻辑。

3. 样式控制

   • Flowbite 默认用 hidden 控制折叠。
   • 如果想要过渡效果，可以给内容区添加 Tailwind 的 transition 类。

4. Vue 3 + Flowbite Collapse 示例

在 Vue 3 中，你可以这样封装一个 Collapse 组件：

<template>
  <div>
    <!-- 触发按钮 -->
    <button 
      id="toggleBtn"
      class="px-4 py-2 text-white bg-blue-600 rounded"
    >
      Toggle Collapse
    </button>

    <!-- 折叠内容 -->
    <div id="contentBox" class="hidden transition-all duration-300">
      <div class="p-4 border border-gray-200 rounded-lg shadow">
        Vue 3 中的 Flowbite 折叠面板
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Collapse } from 'flowbite'

onMounted(() => {
  const $targetEl = document.getElementById('contentBox')
  const $triggerEl = document.getElementById('toggleBtn')
  new Collapse($targetEl, $triggerEl)
})
</script>

5. 带动画效果的 Collapse 示例

为了实现 平滑展开/收起动画，可以配合 Tailwind 的过渡类（transition-all duration-500 ease-in-out）以及 overflow-hidden。

HTML 动画版

<!-- 触发按钮 -->
<button 
  data-collapse-toggle="collapseAnim" 
  type="button"
  class="px-4 py-2 text-white bg-blue-600 rounded"
>
  Toggle Animated Collapse
</button>

<!-- 折叠面板 -->
<div id="collapseAnim" class="hidden overflow-hidden transition-all duration-500 ease-in-out">
  <div class="p-4 border border-gray-200 rounded-lg shadow">
    ✨ 这里是带动画的折叠面板内容  
    展开和收起时会有平滑过渡效果。
  </div>
</div>

📌 关键点：

• transition-all duration-500 ease-in-out：控制过渡动画（0.5s，缓入缓出）。
• overflow-hidden：保证收起时内容不会溢出。

Vue 3 动画版 Collapse

<template>
  <div>
    <button 
      id="toggleBtnAnim"
      class="px-4 py-2 text-white bg-blue-600 rounded"
    >
      Toggle Animated Collapse
    </button>

    <div 
      id="contentBoxAnim"
      class="hidden overflow-hidden transition-all duration-500 ease-in-out"
    >
      <div class="p-4 border border-gray-200 rounded-lg shadow">
        Vue 3 + Flowbite 折叠面板（带动画效果）
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Collapse } from 'flowbite'

onMounted(() => {
  const $targetEl = document.getElementById('contentBoxAnim')
  const $triggerEl = document.getElementById('toggleBtnAnim')

  new Collapse($targetEl, $triggerEl)
})
</script>

6. 小技巧

1. 默认高度动画

   • 给内容区域加 max-h-0（默认收起），展开时用 max-h-[500px] 控制。
   • 配合 transition-all 实现从 0 → 目标高度的动画。

2. 渐隐渐现

   • 额外加上 opacity-0 → opacity-100 类，实现透明度渐变。

3. Tailwind Arbitrary Values

   • max-h-[400px] 可以自定义任何数值，适合内容高度不固定的场景。

7. 总结

Flowbite 提供了两种方式来实现折叠面板：

• 推荐方式：使用 data-collapse-toggle，简单快速。
• 进阶方式：使用 Collapse 类手动初始化，适合框架和动态内容。

配合 Tailwind 的 transition，还能轻松实现平滑动画效果，让折叠面板更具交互体验。