DevactionUI.Modal (devaction_ui v0.1.0)

Copy Markdown View Source

A dialog for a decision that interrupts: confirm, tell that something worked, fill a short form. To edit without losing the context use DevactionUI.Drawer; to ask before something that cannot be undone use danger_dialog/1.

The LiveView decides when it is there (:if={@open}). It takes the focus in, keeps it inside, closes with Esc and, unless it is dismissible={false}, with a click outside; the focus goes back to the button that opened it when that button used DevactionUI.Drawer.open/1. Sizes: :sm 400, :md 520 (default), :lg 720.

Summary

Functions

modal(assigns)

Attributes

  • id (:string) (required)
  • size (:atom) - Defaults to :md. Must be one of :sm, :md, or :lg.
  • tone (:atom) - the tone of the icon tile. Defaults to :neutral. Must be one of :neutral, :info, :ok, :warn, or :risk.
  • centered (:boolean) - the icon, the title and the text in the middle, for a success. Defaults to false.
  • dismissible (:boolean) - a click outside closes it. Defaults to true.
  • on_close (:any) (required) - an event name or a JS command, run on Esc, the close button and a click outside.
  • close_label (:string) - when given, a close button is drawn in the corner. Defaults to nil.
  • focus (:string) - a selector of what takes the focus when it opens; the first control when left out. Defaults to nil.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • icon - the mark in the tile before the title.
  • close_icon
  • title (required)
  • subtitle
  • inner_block - the body, between the header and the footer.
  • footer - the actions, at the end.