Salad UI
- 1.3.0

Collapsible

The main collapsible component.

Read more Read less

Options

  • :id - Required unique identifier for the collapsible.
  • :open - Whether the collapsible is initially open. Defaults to false.
  • :on-open - Handler for collapsible open event.
  • :on-close - Handler for collapsible close event.
  • :class - Additional CSS classes.

Component events

  • :on-open - Fired when the collapsible opens.
  • :on-close - Fired when the collapsible closes.

Server commands

  • "open" - Opens the collapsible.
  • "close" - Closes the collapsible.
  • "toggle" - Toggles the collapsible.
Default Open in playground

@peduarte starred 3 repositories

@radix-ui/primitives 
<.collapsible id="collapsible-single-default" class="w-[350px] space-y-2">
  <div class="flex items-center justify-between space-x-4 px-4">
    <h4 class="text-sm font-semibold">
      @peduarte starred 3 repositories
    </h4>
    <.collapsible_trigger>
      <.button variant="ghost" size="sm" class="w-9 p-0">
        <.icon name="hero-chevron-up-down" class="h-4 w-4"></.icon>
        <span class="sr-only">
          Toggle
        </span>
      </.button>
    </.collapsible_trigger>
  </div>
  <div class="rounded-md border border-border px-4 py-3 font-mono text-sm">
    @radix-ui/primitives
  </div>
  <.collapsible_content class="space-y-2">
    <div class="rounded-md border border-border px-4 py-3 font-mono text-sm">
      @radix-ui/colors
    </div>
    <div class="rounded-md border border-border px-4 py-3 font-mono text-sm">
      @stitches/react
    </div>
  </.collapsible_content>
</.collapsible>