LiveUiKit.UI.Modal (LiveUIKit v0.1.3)

Modal is used to show a dialog or a box when you click a button.

Link to this section Summary

Functions

Modal component

Modal backdrop component.

Modal body component.

Modal content component.

Modal dialog component.

Modal header component.

Modal title component.

Link to this section Functions

Modal component:

examples

Examples

<button type="button" phx-click={UI.Modal.open("#modal")} >
  Open modal
</button>

<.modal id="modal" title="Awesome modal">
  This is the modal body
</.modal>

building-a-modal-from-scratch

Building a modal from scratch:

<div class={@class} id={@id} role="dialog" data-init-modal={open_modal()} phx-remove={close_modal()} style="display: none">
  <.modal_backdrop visible={@backdrop} />
  <.modal_dialog>
    <.modal_content>
      <.modal_header>
        <.modal_title>
          <%= if assigns[:modal_title], do: render_slot(@modal_title), else: @title %>
        </.modal_title>
        <%= if @return_to do %>
          <%= live_patch raw("&times;"), to: @return_to, phx_click: close_modal(), id: "close", class: "" %>
        <% else %>
          <button type="button" id="close" phx-click={close_modal()}>&times;</button>
        <% end %>
      </.modal_header>
      <.modal_body>
        <%= render_slot(@inner_block, assigns) %>
      </.modal_body>
    </.modal_content>
  </.modal_dialog>
</div>

options

Options

  • return_to - Add an option path to redirect to when modal close.
  • header - Passing in a header text will act as a <.card_header>
  • visible - If the modal should be visible from start
  • backdrop - If a backdrop should be visible
  • title - Passing in a header text will act as a <.modal_title>
  • extended_class - The class or classes that will be appended to the default class attribute.

All further assigns will be passed to the alert tag.

Link to this function

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