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.

@peduarte starred 3 repositories

@radix-ui/primitives
Attribute Type Documentation Default Value
Required id * :string

Unique identifier for the collapsible
open :boolean

Whether the collapsible is initially open
false
on-open :any

Handler for collapsible open event
on-close :any

Handler for collapsible close event
class :string
rest :global
Required inner_block * :slot 
<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>