Dialog · Pattern
Controlled (LiveView)
Controlled dialog
LiveView owns open state.
<.dialog
id="patterns-dialog-controlled"
class="dialog"
controlled
open={@open}
on_open_change="patterns_dialog_open_changed"
>
<:trigger>Open</:trigger>
<:content>
<p>LiveView owns open state.</p>
</:content>
<:close_trigger>
<.heroicon name="hero-x-mark" />
</:close_trigger>
</.dialog>
defmodule MyAppWeb.DialogPatternsLive do
use MyAppWeb, :live_view
def mount(_params, _session, socket) do
{:ok, assign(socket, :open, false)}
end
def handle_event("patterns_dialog_open_changed", %{"open" => open}, socket) do
{:noreply, assign(socket, :open, open)}
end
def render(assigns) do
~H"""
<.dialog
id="patterns-dialog-controlled"
class="dialog"
controlled
open={@open}
on_open_change="patterns_dialog_open_changed"
>
<:trigger>Open</:trigger>
<:content>
<p>LiveView owns open state.</p>
</:content>
<:close_trigger>
<.heroicon name="hero-x-mark" />
</:close_trigger>
</.dialog>
"""
end
end
Alert dialog
Delete this item?
This action cannot be undone.
<.dialog
id="patterns-dialog-alert"
class="dialog"
role="alertdialog"
modal
close_on_interact_outside={false}
initial_focus="patterns-dialog-alert-cancel"
final_focus="dialog:patterns-dialog-alert:trigger"
>
<:trigger>Delete item</:trigger>
<:title>Delete this item?</:title>
<:description>This action cannot be undone.</:description>
<:content>
<div class="flex flex-wrap justify-end gap-2 mt-4">
<.action id="patterns-dialog-alert-cancel" phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button button--sm button--ghost">
Cancel
</.action>
<.action phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button button--sm button--alert">
Delete
</.action>
</div>
</:content>
</.dialog>
<.dialog
id="patterns-dialog-alert"
class="dialog"
role="alertdialog"
modal
close_on_interact_outside={false}
initial_focus="patterns-dialog-alert-cancel"
final_focus="dialog:patterns-dialog-alert:trigger"
>
<:trigger>Delete item</:trigger>
<:title>Delete this item?</:title>
<:description>This action cannot be undone.</:description>
<:content>
<div class="flex flex-wrap justify-end gap-2 mt-4">
<.action id="patterns-dialog-alert-cancel" phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button button--sm button--ghost">
Cancel
</.action>
<.action phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button button--sm button--alert">
Delete
</.action>
</div>
</:content>
</.dialog>