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(assigns)
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("×"), to: @return_to, phx_click: close_modal(), id: "close", class: "" %>
<% else %>
<button type="button" id="close" phx-click={close_modal()}>×</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 startbackdrop
- If a backdrop should be visibletitle
- 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.
modal_backdrop(assigns)
Modal backdrop component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal backdrop tag.
modal_body(assigns)
Modal body component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal body tag.
modal_content(assigns)
Modal content component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal content tag.
modal_dialog(assigns)
Modal dialog component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal dialog tag.
modal_header(assigns)
Modal header component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal header tag.
modal_title(assigns)
Modal title component.
options
Options
extended_class
- The class or classes that will be appended to the default class attribute.
All further assigns will be passed to the modal title tag.