View Source DaisyUIComponents.Modal (DaisyUIComponents v0.2.0)

Modal component

https://daisyui.com/components/modal/

Summary

Functions

Renders a dialog modal.

Renders a modal.

Attributes

  • class (:string) - Defaults to nil.

Slots

  • inner_block

Attributes

  • modal_id (:string) (required)
  • class (:string) - Defaults to nil.
  • content_class (:string) - Defaults to nil.
  • closable (:boolean) - Defaults to true.
  • Global attributes are accepted.

Slots

  • inner_block
  • actions - the slot for showing modal actions.

Functions

Renders a dialog modal.

Examples

<.dialog_modal id="confirm-modal">
  <.modal_box>
    This is a modal
  </.modal_box>
</.dialog_modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  <.modal_box>
    This is another modal
  </.modal_box>
</.modal>

dialog with actions:

<.dialog_modal id="confirm">
  <.modal_box>
    Modal to confirm
  </.modal_box>
  <:actions>
    <.button>Confirm</.button>
  <:actions>
</.dialog_modal>

Attributes

  • id (:string) (required)
  • class (:string) - Defaults to nil.
  • open (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • Global attributes are accepted.

Slots

  • inner_block
Link to this function

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

View Source

Renders a modal.

Examples

<.modal id="confirm-modal">
  This is a modal.
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal.
</.modal>

Modal with actions:

<.modal id="confirm">
  Modal to confirm
  <:actions>
    <.button>Confirm</.button>
  <:actions>
</.modal>

Attributes

  • id (:string) (required)
  • open (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • Global attributes are accepted.

Slots

  • actions - the slot for showing modal actions.
  • inner_block
Link to this function

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

View Source