Collapsible

#Basic usage

collapsible/basic.vue

<script setup lang="ts">
import { Collapsible } from "@bysages/vue";
</script>

<template>
  <Collapsible.Root class="w-full">
    <Collapsible.Trigger>
      What is a design token?
      <Collapsible.Indicator>
        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path
            d="M6 4l4 4-4 4"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </Collapsible.Indicator>
    </Collapsible.Trigger>
    <Collapsible.Content>
      <p>
        A named visual decision — a color, a spacing step, a radius — compiled into a CSS custom
        property. Components resolve their every value from tokens, so themes change without
        restyling.
      </p>
    </Collapsible.Content>
  </Collapsible.Root>
</template>

#Props

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Indicator

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`collapsedHeight`	`number \| string`		The height of the content when collapsed.
`collapsedWidth`	`number \| string`		The width of the content when collapsed.
`defaultOpen`	`boolean`		The initial open state of the collapsible when rendered. Use when you don't need to control the open state of the collapsible.
`disabled`	`boolean`		Whether the collapsible is disabled.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; content: string; trigger: string; }>`		The ids of the elements in the collapsible. Useful for composition.
`lazyMount`	`boolean`	`false`	Whether to enable lazy mounting
`open`	`boolean`		The controlled open state of the collapsible.
`unmountOnExit`	`boolean`	`false`	Whether to unmount on exit.

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.