LineaUI.Components.Modal (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's modal: a centered card over a dark backdrop, with LineOne's enter and leave animations.

<.button phx-click={LineaUI.open("edit-pin")}>Edit</.button>

<.modal id="edit-pin" animation="scale" origin="top">
  <:header>Edit Pin</:header>
  <p>Lorem ipsum dolor sit amet.</p>
  <:footer>
    <.button phx-click={LineaUI.close("edit-pin")}>Cancel</.button>
  </:footer>
</.modal>

It opens and closes in the browser (LineaUI.open/close/toggle("id")), from the server (LineaUI.open(socket, "id")) or from an assign:

<.modal id="confirm" open={@confirming} on_close="cancel-confirm">…</.modal>

on_close runs however the modal closed (Esc, the backdrop, the close button, a command), so the server can keep @confirming in sync. With an event name the LiveView (or target) gets handle_event("cancel-confirm", %{"id" => "confirm"}, socket); a %JS{} is run as is. Without a :header the close × sits in the card's corner above the content; give wide content (an image) a close_variant="chip" so the button keeps a backdrop.

prevent_close keeps Esc and the backdrop from closing it.

Summary

Functions

modal(assigns)

Renders a modal, closed unless open.

Functions

modal(assigns)

Renders a modal, closed unless open.

Events: on_open and on_close push %{"id" => id} when they are event names.

Attributes

  • id (:string) (required)
  • open (:boolean) - The server's state; the browser can still open and close it. Defaults to false.
  • animation (:string) - LineOne's transitions: the backdrop always fades, the card shifts, scales or slides up. Defaults to "fade". Must be one of "fade", "scale", "sheet", "shift-down", or "shift-up".
  • size (:string) - The card's maximum width. Defaults to "lg". Must be one of "full", "lg", "md", "sm", "xl", or "xs".
  • placement (:string) - Defaults to "center". Must be one of "bottom", "center", or "top".
  • origin (:string) - Where the scale animation grows from. Defaults to "center". Must be one of "bottom", "center", or "top".
  • blur (:boolean) - Blurs the page behind the backdrop. Defaults to false.
  • prevent_close (:boolean) - Esc and the backdrop do not close it. Defaults to false.
  • close_button (:boolean) - The × in the header; without a header it sits in the card's corner. Defaults to true.
  • close_variant (:string) - The corner × of a modal without a header: plain is a bare icon button, chip gives it a translucent backdrop so it stays legible over wide content such as an image. Defaults to "plain". Must be one of "plain", or "chip".
  • on_open (:any) - An event name or a %JS{}. Defaults to nil.
  • on_close (:any) - An event name or a %JS{}. Defaults to nil.
  • target (:any) - The phx-target of on_open / on_close events. Defaults to nil.
  • close_label (:string) - Defaults to "Close".
  • body_class (:any) - Merged into the body under a :header (px-4 py-4 sm:px-5 by default). Defaults to nil.
  • class (:any) - Merged into the card. Defaults to nil.
  • Global attributes are accepted.

Slots

  • header - Accepts attributes:
    • variant (:string) - bar is LineOne's tinted title bar, plain the card title of the page. Must be one of "bar", or "plain".
    • class (:any)
  • inner_block (required)
  • footer - Accepts attributes:
    • class (:any)