Corex.Dialog (Corex v0.1.0-alpha.29)

View Source

Phoenix implementation of Zag.js Dialog.

Examples

Basic Usage

With top-level slots:

<.dialog id="my-dialog" class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:title>Dialog Title</:title>
  <:description>
    This is a dialog description that explains what the dialog is about.
  </:description>
  <:content>
    <p>Dialog content goes here. You can add any content you want inside the dialog.</p>
  </:content>
  <:close_trigger>
    <.icon name="hero-x-mark" class="icon" />
  </:close_trigger>
</.dialog>

With title, description, and close trigger inside content (use the same id as the dialog):

<.dialog id="my-dialog" class="dialog">
  <:trigger>Open Dialog</:trigger>
  <:content>
    <.dialog_title id="my-dialog">Dialog Title</.dialog_title>
    <.dialog_description id="my-dialog">
      This is a dialog description that explains what the dialog is about.
    </.dialog_description>
    <p>Dialog content goes here. You can add any content you want inside the dialog.</p>
    <.dialog_close_trigger id="my-dialog">
      <.icon name="hero-x-mark" class="icon" />
    </.dialog_close_trigger>
  </:content>
</.dialog>

Controlled Mode

<.dialog
  id="my-dialog"
  controlled
  open={@dialog_open}
  on_open_change="dialog_changed">
  <:trigger>Open Dialog</:trigger>
  <:content>
    <:title>Dialog Title</:title>
    <:description>Dialog description goes here.</:description>
    <p>Dialog content</p>
    <:close_trigger>Close</:close_trigger>
  </:content>
</.dialog>
def handle_event("dialog_changed", %{"open" => open}, socket) do
  {:noreply, assign(socket, :dialog_open, open)}
end

API Control

In order to use the API, you must use an id on the component

Client-side

<button phx-click={Corex.Dialog.set_open("my-dialog", true)}>
  Open Dialog
</button>

Server-side

def handle_event("open_dialog", _, socket) do
  {:noreply, Corex.Dialog.set_open(socket, "my-dialog", true)}
end

Styling

Use data attributes to target elements:

[data-scope="dialog"][data-part="root"] {}
[data-scope="dialog"][data-part="trigger"] {}
[data-scope="dialog"][data-part="backdrop"] {}
[data-scope="dialog"][data-part="positioner"] {}
[data-scope="dialog"][data-part="content"] {}
[data-scope="dialog"][data-part="title"] {}
[data-scope="dialog"][data-part="description"] {}
[data-scope="dialog"][data-part="close-trigger"] {}

If you wish to use the default Corex styling, you can use the class dialog on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/dialog.css";

You can then use modifiers

<.dialog class="dialog dialog--accent dialog--lg">

Learn more about modifiers and Corex Design

Summary

Components

dialog(assigns)

Renders a dialog component.

dialog_close_trigger(assigns)

Renders the dialog close button. Use inside <:content> when not using the top-level <:close_trigger> slot. Pass the same id as the parent dialog.

dialog_description(assigns)

Renders the dialog description. Use inside <:content> when not using the top-level <:description> slot. Pass the same id as the parent dialog.

dialog_title(assigns)

Renders the dialog title. Use inside <:content> when not using the top-level <:title> slot. Pass the same id as the parent dialog.

API

set_open(dialog_id, open)

Sets the dialog open state from client-side. Returns a Phoenix.LiveView.JS command.

set_open(socket, dialog_id, open)

Sets the dialog open state from server-side. Pushes a LiveView event.

Components

dialog(assigns)

Renders a dialog component.

Attributes

  • id (:string) - The id of the dialog, useful for API to identify the dialog.
  • open (:boolean) - The initial open state or the controlled open state. Defaults to false.
  • controlled (:boolean) - Whether the dialog is controlled. Only in LiveView, the on_open_change event is required. Defaults to false.
  • modal (:boolean) - Whether the dialog is modal. Defaults to false.
  • close_on_interact_outside (:boolean) - Whether to close the dialog when clicking outside. Defaults to true.
  • close_on_escape (:boolean) - Whether to close the dialog when pressing Escape. Defaults to true.
  • prevent_scroll (:boolean) - Whether to prevent body scroll when dialog is open. Defaults to false.
  • restore_focus (:boolean) - Whether to restore focus when dialog closes. Defaults to true.
  • dir (:string) - The direction of the dialog. When nil, derived from document (html lang + config :rtl_locales). Defaults to nil. Must be one of nil, "ltr", or "rtl".
  • on_open_change (:string) - The server event name when the open state changes. Defaults to nil.
  • on_open_change_client (:string) - The client event name when the open state changes. Defaults to nil.
  • Global attributes are accepted.

Slots

  • trigger (required) - Accepts attributes:
    • class (:string)
    • aria_label (:string)
  • content (required) - Accepts attributes:
    • class (:string)
  • title - Accepts attributes:
    • class (:string)
  • description - Accepts attributes:
    • class (:string)
  • close_trigger - Accepts attributes:
    • class (:string)

dialog_close_trigger(assigns)

Renders the dialog close button. Use inside <:content> when not using the top-level <:close_trigger> slot. Pass the same id as the parent dialog.

Attributes

  • id (:string) (required)
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • Global attributes are accepted.

Slots

  • inner_block (required)

dialog_description(assigns)

Renders the dialog description. Use inside <:content> when not using the top-level <:description> slot. Pass the same id as the parent dialog.

Attributes

  • id (:string) (required)
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • Global attributes are accepted.

Slots

  • inner_block (required)

dialog_title(assigns)

Renders the dialog title. Use inside <:content> when not using the top-level <:title> slot. Pass the same id as the parent dialog.

Attributes

  • id (:string) (required)
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • Global attributes are accepted.

Slots

  • inner_block (required)

API

set_open(dialog_id, open)

Sets the dialog open state from client-side. Returns a Phoenix.LiveView.JS command.

Examples

<button phx-click={Corex.Dialog.set_open("my-dialog", true)}>
  Open Dialog
</button>

set_open(socket, dialog_id, open)

Sets the dialog open state from server-side. Pushes a LiveView event.

Examples

def handle_event("open_dialog", _params, socket) do
  socket = Corex.Dialog.set_open(socket, "my-dialog", true)
  {:noreply, socket}
end