LanternUI.Components.Modal (LanternUI v0.4.0)

Copy Markdown View Source

Modal dialog on the shared overlay runtime (focus trap, Escape/outside dismissal, prefers-reduced-motion-aware fade).

<.modal id="confirm-delete">
  <h2>Delete 3 objects?</h2>
  <p>This cannot be undone.</p>
  <.button phx-click={LanternUI.close_dialog("confirm-delete")}>Cancel</.button>
  <.button variant="solid" color="danger" phx-click="delete">Delete</.button>
</.modal>

<.button phx-click={LanternUI.open_dialog("confirm-delete")}>Delete…</.button>

The API mirrors Fluxon's modal/1; open/close from the client with LanternUI.open_dialog/1 / close_dialog/1 (JS commands) or from the server with LanternUI.open_dialog(socket, id) / close_dialog(socket, id). Animation-tuning attrs (animation*) are accepted for Fluxon compatibility; the fade duration comes from the --lantern-duration token.

Summary

Functions

modal(assigns)

Functions

modal(assigns)

Attributes

  • id (:string) (required)
  • open (:boolean) - render already open (server-driven modals). Defaults to false.
  • on_open (Phoenix.LiveView.JS) - Defaults to nil.
  • on_close (Phoenix.LiveView.JS) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • container_class (:any) - Defaults to nil.
  • backdrop_class (:any) - Defaults to nil.
  • close_on_esc (:boolean) - Defaults to true.
  • close_on_outside_click (:boolean) - Defaults to true.
  • prevent_closing (:boolean) - Defaults to false.
  • hide_close_button (:boolean) - Defaults to false.
  • placement (:string) - Defaults to "center". Must be one of "center", or "top".
  • animation (:string) - accepted for Fluxon compat; fade is token-driven. Defaults to nil.
  • animation_enter (:string) - accepted for Fluxon compat. Defaults to nil.
  • animation_leave (:string) - accepted for Fluxon compat. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)