Collapsible

An interactive component which expands/collapses a panel.

Examples

Default

@peduarte starred 3 repositories

@radix-ui/primitives

<script setup>
import { ref } from 'vue'
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@empathyds/vue'
import { Button } from '@/components/ui/button'
import { ChevronsUpDown } from 'lucide-vue-next'

const isOpen = ref(false)
</script>

<template>
  <Collapsible
    v-model:open="isOpen"
    class="w-[350px] space-y-2"
  >
    <div class="flex items-center justify-between space-x-4 px-4">
      <h4 class="text-sm font-semibold leading-9 my-0">
        @peduarte starred 3 repositories
      </h4>
      <CollapsibleTrigger as-child>
        <Button variant="ghost" size="sm" class="w-9 p-0">
          <ChevronsUpDown class="h-4 w-4" />
          <span class="sr-only">Toggle</span>
        </Button>
      </CollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-3 font-mono text-sm">
      @radix-ui/primitives
    </div>
    <CollapsibleContent class="space-y-2">
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @radix-ui/colors
      </div>
      <div class="rounded-md border px-4 py-3 font-mono text-sm">
        @stitches/react
      </div>
    </CollapsibleContent>
  </Collapsible>
</template>

Props

Collapsible

Prop	Type	Default	Description
default-open	boolean	false	The open state of the collapsible when it is initially rendered
open	boolean	-	The controlled open state of the collapsible
disabled	boolean	false	Whether the collapsible is disabled

Slots

Collapsible

Slot	Description
default	The content of the collapsible

CollapsibleTrigger

Slot	Description
default	The trigger content

CollapsibleContent

Slot	Description
default	The collapsible content