النمط البصري

    <.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

  

    <.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-space-sm mt-space-lg">
      <.action id="patterns-dialog-alert-cancel" phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button ui-size-sm">
        Cancel
      </.action>
      <.action phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button ui-size-sm ui-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-space-sm mt-space-lg">
      <.action id="patterns-dialog-alert-cancel" phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button ui-size-sm">
        Cancel
      </.action>
      <.action phx-click={Corex.Dialog.set_open("patterns-dialog-alert", false)} class="button ui-size-sm ui-alert">
        Delete
      </.action>
    </div>
  </:content>
</.dialog>