Collapsible 折叠块

轻量级单项折叠组件，用于显示和隐藏内容。与 Collapse（多面板手风琴）不同，Collapsible 管理单个开/关状态 — 适用于可切换区域、可展开详情或渐进式披露模式。

?

名称	分类	说明	类型	默认值
ghost	? 风格	幽灵模式，无边框和阴影	boolean	false
color	? 颜色	颜色主题，支持预设名称（primary / success / warning / danger / info）或自定义十六进制颜色	string	—
disabled	? 状态	是否禁用	boolean	false
default-open	? 行为	默认是否展开（非受控模式）	boolean	false
CollapsibleTriggeras-child	? 行为	是否使用子元素作为触发器（保留）	boolean	false
model-value / v-model	? 内容	是否展开（受控模式）	boolean	—
change	? 事件	展开/收起状态改变时触发	(open: boolean) => void	—
default	? 插槽	内容区域，应包含 CollapsibleTrigger 和 CollapsibleContent		—
CollapsibleTriggerdefault	? 插槽	触发器内容		—
CollapsibleContentdefault	? 插槽	可折叠内容		—
open	? 暴露	当前展开状态	Ref<boolean>	—
toggle	? 暴露	切换展开/收起状态	() => void	—

基础用法

点击触发器切换内容区域的显隐。

<template>
  <div class="demo-collapsible">
    <px-collapsible>
      <px-collapsible-trigger>
        <span class="trigger-label">Click to toggle</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>This is the collapsible content. It can contain any elements.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

<style scoped>
.demo-collapsible {
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
}
</style>

默认展开

使用 default-open 属性使内容默认展开。

<template>
  <div class="demo-collapsible">
    <px-collapsible default-open>
      <px-collapsible-trigger>
        <span class="trigger-label">Starts expanded</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>This content is visible by default when the component mounts.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

<style scoped>
.demo-collapsible {
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
}
</style>

禁用状态

设置 disabled 阻止折叠块被切换。

<template>
  <div class="demo-collapsible">
    <px-collapsible disabled>
      <px-collapsible-trigger>
        <span class="trigger-label">Disabled (cannot toggle)</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>This content is hidden and cannot be toggled.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

<style scoped>
.demo-collapsible {
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
}
</style>

颜色变体

使用 color 属性设置预设颜色名称或自定义十六进制颜色。

<template>
  <div class="demo-collapsible">
    <px-collapsible v-for="c in colors" :key="c" :color="c" default-open>
      <px-collapsible-trigger>
        <span class="trigger-label">{{ c }}</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>Content styled with {{ c }} color theme.</p>
      </px-collapsible-content>
    </px-collapsible>

    <px-collapsible color="#e64553" default-open>
      <px-collapsible-trigger>
        <span class="trigger-label">Custom hex #e64553</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>Content styled with a custom hex color.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

<script setup lang="ts">
const colors = ['primary', 'success', 'warning', 'danger', 'info'];
</script>

<style scoped>
.demo-collapsible {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
  text-transform: capitalize;
}
</style>

幽灵模式

启用 ghost 模式，移除边框和阴影。

<template>
  <div class="demo-collapsible">
    <px-collapsible ghost>
      <px-collapsible-trigger>
        <span class="trigger-label">Ghost mode (no border)</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>Content area without pixel border or shadow — useful when embedding inside other containers.</p>
      </px-collapsible-content>
    </px-collapsible>

    <px-collapsible ghost color="primary">
      <px-collapsible-trigger>
        <span class="trigger-label">Ghost + color</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>Ghost mode combined with a preset color.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

<style scoped>
.demo-collapsible {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
}
</style>

受控状态

使用 v-model 从外部控制展开状态。

<template>
  <div class="demo-collapsible">
    <px-button @click="isOpen = !isOpen">
      {{ isOpen ? 'Close' : 'Open' }} from outside
    </px-button>

    <px-collapsible v-model="isOpen" color="primary">
      <px-collapsible-trigger>
        <span class="trigger-label">Controlled state: {{ isOpen ? 'Open' : 'Closed' }}</span>
      </px-collapsible-trigger>
      <px-collapsible-content>
        <p>This collapsible is controlled via <code>v-model</code>. You can toggle it from the button above or by clicking the trigger.</p>
      </px-collapsible-content>
    </px-collapsible>
  </div>
</template>

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

const isOpen = ref(false);
</script>

<style scoped>
.demo-collapsible {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
}
.trigger-label {
  font-weight: 500;
}
</style>