Elemental.Actions.Modal (elemental v0.3.0)
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.
Requires JavaScript enabled and Elemental's event listeners added.
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 tofalse
.show
(:boolean
) - If true enablesopen
. For compatibility with Phoenix' implementation.class
(:any
) - Additional CSS classes to add to the modal box. Defaults tonil
.- Global attributes are accepted.
Show a modal based on it's ID.
Requires JavaScript enabled and Elemental's event listeners added.