Noora.Modal (noora v0.71.0)

Copy Markdown

Renders a modal component with customizable headers, content, and footers, supporting various header types, sizes, and event handling.

Example

<.modal id="user-profile-modal" title="Edit Profile" description="Update your personal information">
  <:trigger>
    <.button>Open Modal</.button>
  </:trigger>
  <:header_button>
    <.button on_click="save-profile">Save</.button>
  </:header_button>
  <form id="profile-form">
    <.input name="name" label="Name" />
    <.input name="email" label="Email" type="email" />
  </form>
  <:footer>
    <.modal_footer>
      <:action>
        <.button variant="ghost">Cancel</.button>
        <.button variant="primary">Save Changes</.button>
      </:action>
    </.modal_footer>
  </:footer>
</.modal>

Summary

Functions

modal(assigns)
modal_footer(assigns)

Functions

modal(assigns)

Attributes

  • id (:string) (required) - The modal's unique identifier.
  • title (:string) - Title of the modal. Defaults to nil.
  • description (:string) - Description of the modal. Only visible when header_size is 'large'. Defaults to nil.
  • header_type (:string) - Type of the header. Defaults to "default". Must be one of "default", "icon", "success", "info", "warning", or "error".
  • header_size (:string) - Size of the header. Defaults to "large". Must be one of "small", or "large".
  • on_dismiss (:string) - Event to emit when the dismiss icon is clicked. Defaults to nil.
  • on_open_change (:string) - An optional event to fire when the modal is opened or closed. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • trigger (required) - The modal's trigger. Should be a button that accepts the attributes provided by the slot.
  • header_icon - Icon to be rendered in the header when type is 'icon'.
  • header_button
  • footer - The modal's footer element.
  • inner_block