PineUiPhoenix.Components.Modal (Pine UI v0.2.1)

Copy Markdown View Source

Dialogs: centred modal, full-screen modal, and slide-over panel.

Ports Pines modal, full screen modal and slide-over. All three share one open/close contract.

<.button x-on:click="$dispatch('pine:open', {}, {target: document.getElementById('confirm')})">
  Delete
</.button>

<.modal id="confirm" title="Are you sure?">
  This cannot be undone.
  <:footer><.button variant="destructive">Delete</.button></:footer>
</.modal>

Opening and closing from the server

Every dialog listens for three namespaced events on itself, so no JavaScript is needed:

<.button phx-click={JS.dispatch("pine:open", to: "#confirm")}>Delete</.button>

pine:open, pine:close and pine:toggle are all understood. Scoping them to the element rather than window means several dialogs coexist without the id-matching dance that a global listener would need.

From a LiveView, push through the PineBridge hook:

push_event(socket, "pine:dispatch", %{to: "#confirm", event: "pine:close"})

Focus trapping

x-trap.noscroll requires the Alpine Focus plugin. Without it the dialog still opens and closes, but focus can escape to the page behind and background scrolling is not locked — so install it if you use dialogs.

Summary

Overlays

full_screen_modal(assigns)

Renders a dialog that fills the viewport.

modal(assigns)

Renders a centred modal dialog.

slide_over(assigns)

Renders an off-canvas panel that slides in from the edge.

Overlays

full_screen_modal(assigns)

Renders a dialog that fills the viewport.

Useful for immersive tasks — an editor, a gallery, a multi-step flow — where a centred box would be too cramped.

Attributes

  • id (:string) (required)
  • title (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • close_on_escape (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
  • header

modal(assigns)

Renders a centred modal dialog.

Accessibility

role="dialog" with aria-modal="true", labelled by its title and described by its description. Focus is trapped while open and restored to the trigger on close.

Attributes

  • id (:string) (required) - Required — this is how events target the dialog.
  • title (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • size (:string) - Defaults to "md". Must be one of "sm", "md", "lg", "xl", "2xl", or "full".
  • open (:boolean) - Render initially open. Defaults to false.
  • close_on_backdrop (:boolean) - Defaults to true.
  • close_on_escape (:boolean) - Defaults to true.
  • show_close_button (:boolean) - Defaults to true.
  • class (:string) - Applied to the dialog panel. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
  • header - Replaces the generated title/description header.
  • footer

slide_over(assigns)

Renders an off-canvas panel that slides in from the edge.

Attributes

  • id (:string) (required)
  • title (:string) - Defaults to nil.
  • description (:string) - Defaults to nil.
  • position (:string) - Defaults to "right". Must be one of "left", or "right".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", "lg", "xl", or "full".
  • open (:boolean) - Defaults to false.
  • close_on_backdrop (:boolean) - Defaults to true.
  • close_on_escape (:boolean) - Defaults to true.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)
  • footer