Floating Panel · Events

Subscribe to open changes from LiveView or the client.

On Open Change (Server)

Time	Source	Id	Value
No event yet. Interact with the components to receive new events

    <.floating_panel
  class="floating-panel"
  on_open_change="floating_panel_open_changed"
>
  <:trigger>
    <span data-closed>Open panel</span>
    <span data-open>Close panel</span>
  </:trigger>
  <:title>Panel</:title>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>Lorem ipsum dolor sit amet.</p>
  </:content>
</.floating_panel>

    def handle_event("floating_panel_open_changed", %{"open" => open, "id" => id} = params, socket) do
  IO.inspect(params, label: "floating_panel_open_changed")
  {:noreply, socket}
end

On Open Change (Client)

Time	Source	Id	Value
No event yet. Interact with the components to receive new events

    <.floating_panel
  id="fp-events-client"
  class="floating-panel"
  on_open_change_client="floating-panel-open-changed"
>
  <:trigger>
    <span data-closed>Open panel</span>
    <span data-open>Close panel</span>
  </:trigger>
  <:title>Panel</:title>
  <:minimize_trigger>
    <.heroicon name="hero-arrow-down-left" class="icon" />
  </:minimize_trigger>
  <:maximize_trigger>
    <.heroicon name="hero-arrows-pointing-out" class="icon" />
  </:maximize_trigger>
  <:default_trigger>
    <.heroicon name="hero-rectangle-stack" class="icon" />
  </:default_trigger>
  <:close_trigger>
    <.heroicon name="hero-x-mark" class="icon" />
  </:close_trigger>
  <:content>
    <p>Lorem ipsum dolor sit amet.</p>
  </:content>
</.floating_panel>

    const el = document.getElementById("fp-events-client");
el?.addEventListener("floating-panel-open-changed", (event) => {
  console.log(event.detail);
});

    const el = document.getElementById("fp-events-client");
el?.addEventListener("floating-panel-open-changed", (event: Event) => {
  console.log((event as CustomEvent<{ id: string; open: boolean }>).detail);
});