Collapsible

An interactive component which expands/collapses a panel.

Usage

Use a PButton or any other component in the default slot of the Collapsible.

Then, use the #content slot to add the content displayed when the Collapsible is open.

<template>
  <PCollapsible class="flex flex-col gap-2 w-48 bg-background p-4 rounded-md">
    <PButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide:chevron-down"
      block
    />

    <template #content>
      <CorePlaceholder class="h-48" />
    </template>
  </PCollapsible>
</template>

Unmount

Use the unmount-on-hide prop to prevent the content from being unmounted when the Collapsible is collapsed. Defaults to true.

unmountOnHide

<template>
  <PCollapsible class="flex flex-col gap-2 w-48 bg-background p-4 rounded-md">
    <PButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide:chevron-down"
      block
    />

    <template #content>
      <CorePlaceholder class="h-48" />
    </template>
  </PCollapsible>
</template>

You can inspect the DOM to see the content being rendered.

Disabled

Use the disabled prop to disable the Collapsible.

disabled

<template>
  <PCollapsible class="flex flex-col gap-2 w-48 bg-background p-4 rounded-md" disabled>
    <PButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide:chevron-down"
      block
    />

    <template #content>
      <CorePlaceholder class="h-48" />
    </template>
  </PCollapsible>
</template>

Examples

Control open state

You can control the open state by using the default-open prop or the v-model:open directive.

<script setup lang="ts">
import { CorePlaceholder, PButton, PCollapsible } from '#components';
import { defineShortcuts } from '#imports';
import { ref } from 'vue';

const open = ref(true);

defineShortcuts({
  o: () => {
    open.value = !open.value;
  },
});
</script>

<template>
  <PCollapsible
    v-model:open="open"
    class="p-4 rounded-md bg-background flex flex-col gap-2 w-48"
  >
    <PButton
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide:chevron-down"
      block
    />

    <template #content>
      <CorePlaceholder class="h-48" />
    </template>
  </PCollapsible>
</template>

In this example, leveraging defineShortcuts, you can toggle the Collapsible by pressing O.

This allows you to move the trigger outside of the Collapsible or remove it entirely.

With rotating icon

Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.

<script setup lang="ts">
import { CorePlaceholder, PButton, PCollapsible } from '#components';
</script>

<template>
  <PCollapsible class="p-4 rounded-md bg-background flex flex-col gap-2 w-48">
    <PButton
      class="group"
      label="Open"
      color="neutral"
      variant="subtle"
      trailing-icon="i-lucide:chevron-down"
      :pohon="{
        trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform-280',
      }"
      block
    />

    <template #content>
      <CorePlaceholder class="h-48" />
    </template>
  </PCollapsible>
</template>

API

Props

Prop	Default	Type

Emits

Event	Type

Slots

Slot	Type

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PCollapsible. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    collapsible: {
      slots: {
        root: '',
        content: ''
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    collapsible: {
      slots: {
        root: '',
        content: ''
      }
    }
  }
};

Anatomy

Here is the anatomy of themeable parts of the Collapsible component:

Coming soon...

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

Chip

An indicator of a numeric value or a state.

FieldGroup

Group multiple button-like elements together.