PtahUi.Components.Modal (PtahUI v0.1.0)

Copy Markdown View Source

Accessible modal dialog with animated transitions, focus trapping, and keyboard (Escape) / click-away closing.

Use show_modal/1 and hide_modal/2 to open/close via JS commands.

Summary

Functions

Returns a JS command that hides the modal.

Returns a JS command that shows the modal.

Functions

hide_modal(js \\ %JS{}, id)

Returns a JS command that hides the modal.

modal(assigns)

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • size (:string) - Defaults to "md".
  • backdrop_class (:string) - Classes for the fullscreen backdrop overlay. Defaults to "bg-gray-900/60 backdrop-blur-sm".
  • body_class (:string) - Classes for the modal panel. Defaults to "bg-white shadow-xl rounded-2xl".
  • close_button (:boolean) - Defaults to true.
  • close_button_class (:string) - Colour classes for the close (×) button. Defaults to "text-gray-400 hover:text-gray-600".
  • Global attributes are accepted.

Slots

  • title
  • inner_block (required)
  • footer

show_modal(js \\ %JS{}, id)

Returns a JS command that shows the modal.