Mishka
Chelekom

Collapse

v0.0.10

v0.0.10StableComponentStatelessJS-moduleJSApache-2.0
Installation mix mishka.ui.gen.component collapse
Source View Source

Overview of the Phoenix and LiveView Collapse Component

The Collapse component provides a simple way to show and hide content with smooth animations. It's unstyled by default, allowing you to apply your own styling while providing the core collapsible functionality.

Basic Usage

The simplest way to use the collapse component is with a trigger and content.

Basic Usage

This content will be hidden/shown when clicking the trigger button.
heex
<!-- Basic collapse example -->
<.collapse id="basic-collapse">
  <:trigger>
    <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Toggle Content
    </button>
  </:trigger>

  <div class="p-4 bg-gray-100 mt-2 rounded">
    This content will be hidden/shown when clicking the trigger button.
  </div>
</.collapse>

Initially Open

You can set the collapse to be initially open by setting the open prop to true.

Initially Open

This content is initially visible when the page loads.
heex
<!-- Initially open collapse -->
<.collapse id="open-collapse" open={true}>
  <:trigger>
    <button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      Toggle (Initially Open)
    </button>
  </:trigger>

  <div class="p-4 bg-green-100 mt-2 rounded">
    This content is initially visible when the page loads.
  </div>
</.collapse>

Custom Animation Duration

Control the animation speed with the duration prop (in milliseconds).

Custom Animation Duration

This collapse animation takes 500ms instead of the default 200ms.
heex
<!-- Custom duration collapse -->
<.collapse id="slow-collapse" duration={500}>
  <:trigger>
    <button class="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600">
      Slow Animation (500ms)
    </button>
  </:trigger>

  <div class="p-4 bg-purple-100 mt-2 rounded">
    This collapse animation takes 500ms instead of the default 200ms.
  </div>
</.collapse>

Server Events

Enable server events to receive notifications when the collapse opens or closes.

Server Events

This collapse sends open/close events to the LiveView server. Check your browser's network tab to see the events.
heex
<!-- Server events collapse -->
<.collapse id="server-collapse" server_events={true}>
  <:trigger>
    <button class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
      Server Events Enabled
    </button>
  </:trigger>

  <div class="p-4 bg-red-100 mt-2 rounded">
    This collapse sends open/close events to the LiveView server.
    Check your browser's network tab to see the events.
  </div>
</.collapse>