Elemental.Actions.Modal (elemental v0.3.1)

Implements a modal component based on <dialog> HTML element and Daisy's modal component. The component relies on the browser implementation for it's main/core implementation and provides JavaScript handlers to allow for controlling the modals from Elixir's side.

The modal can be closed by either pressing escape, by clicking outside of the modal, or by clicking on the close button within it.

Close behaviour implemented relies the browser's imeplementation of the <dialog> component.

Usage

<.modal>
  <h3 class="text-lg font-bold">Title</h3>
  <p class="py-4">Press ESC key, click outside, or click on  button to close</p>
</.modal>

Server side control

You can send the events el-show-modal or el-hide-modal to show/hide the modal based on the server side logic. This requires JavaScript working since it relies on custom event listeners.

Summary

Functions

Hide a modal based on it's ID.

Primary modal component.

Show a modal based on it's ID.

Functions

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

Hide a modal based on it's ID.

Requires JavaScript enabled and Elemental's event listeners added.

modal(assigns)

Primary modal component.

Attributes

  • id (:string) - The ID of the modal. Defaults to a random value.
  • open (:boolean) - If true opens the modal on mount. Defaults to false.
  • show (:boolean) - If true enables open. For compatibility with Phoenix' implementation.
  • class (:any) - Additional CSS classes to add to the modal box. Defaults to nil.
  • Global attributes are accepted.

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

Show a modal based on it's ID.

Requires JavaScript enabled and Elemental's event listeners added.