PhoenixDuskmoon.Component.Feedback.Dialog (PhoenixDuskmoon v9.0.1)

View Source

Modal dialog component using el-dm-dialog custom element.

Examples

<.dm_modal>
  <:trigger :let={dialog_id}>
    <.dm_btn onclick={"#{dialog_id}.showModal()"}>Open</.dm_btn>
  </:trigger>
  <:title>PhoenixDuskmoon</:title>
  <:body>Modal content here</:body>
  <:footer>
    <.dm_btn>Close</.dm_btn>
  </:footer>
</.dm_modal>

Summary

Functions

dm_modal(assigns)

Renders a modal dialog.

Functions

dm_modal(assigns)

Renders a modal dialog.

Examples

<.dm_modal>
  <:trigger :let={dialog_id}>
    <button type="button" onclick={"#{dialog_id}.showModal()"}>Open</button>
  </:trigger>
  <:title>Modal Title</:title>
  <:body>Modal body content</:body>
</.dm_modal>

Attributes

  • id (:any) - Modal id.
  • class (:any) - Additional CSS classes. Defaults to nil.
  • hide_close (:boolean) - Hide the close button. Defaults to false.
  • position (:string) - Modal position. Defaults to nil. Must be one of nil, "top", "middle", or "bottom".
  • backdrop (:boolean) - Apply backdrop blur effect. Defaults to false.
  • size (:string) - Modal size. Defaults to nil. Must be one of nil, "xs", "sm", "md", "lg", or "xl".
  • responsive (:boolean) - Make modal responsive. Defaults to false.
  • no_backdrop (:boolean) - Hide the backdrop overlay. Defaults to false.
  • close_label (:string) - Accessible label for the close button. Defaults to "Close".
  • dialog_label (:string) - Accessible fallback label when no title slot is provided (i18n). Defaults to "Dialog".
  • Global attributes are accepted.

Slots

  • trigger - Element that opens the modal. Accepts attributes:
    • class (:any) - trigger wrapper CSS classes.
  • title - Modal title. Accepts attributes:
    • class (:any) - title container CSS classes.
  • body (required) - Modal content. Accepts attributes:
    • class (:any) - body container CSS classes.
  • footer - Modal footer with actions. Accepts attributes:
    • class (:any) - footer container CSS classes.