View Source Turboprop.Hooks.Dialog (Turboprop v0.4.1)
A dialog component, also known as Modal.
Elements
Required elements
- Trigger: Trigger that opens the dialog.
- Required attributes:
data-part="trigger"
- Required attributes:
- Positioner: Controls the dialog's position in the viewport.
- Required attributes:
data-part="positioner"
- Required attributes:
- Content: Contains the dialog content.
- Needs to be a child of the Positioner.
- Required attributes:
data-part="content"
Optional elements
- Backdrop: Backdrop to cover the rest of the viewport.
- Required attributes:
data-part="backdrop"
- Required attributes:
- Title: Title of the dialog.
- Needs to be a child of the Content.
- Required attributes:
data-part="title"
- Description: Description of the dialog.
- Needs to be a child of the Content.
- Required attributes:
data-part="description"
- Close trigger: Trigger to close the dialog.
- Required attributes:
data-part="close-trigger"
- Required attributes:
Options
Options are set on the outer wrapper element through data attributes.
For boolean attributes, adding the attribute with either an empty value or "true"
is considered truthy, every other value falsy.
data-role
: Role of the dialog.- One of
dialog
oralertdialog
.
- One of
data-prevent-scroll
- boolean: Prevent scrolling of the body behind the dialog. Defaults totrue
.data-close-on-interact-outside
- boolean: Close the dialog when interacting with an element outside of it. Defaults totrue
.data-close-on-escape
- boolean: Close the dialog when the Escape key is pressed. Defaults totrue
.
Events
From the client
If set, the client will push the following events to the server:
data-on-open-change
: Emitted when the open state of the dialog changes.- Sends an event with the type
%{open: boolean()}
- Sends an event with the type
Example
<div id="dialog" phx-hook="Dialog" data-prevent-scroll data-close-on-interact-outside data-close-on-escape>
<button data-part="trigger">
Open dialog
</button>
<div data-part="backdrop"></div>
<div data-part="positioner">
<div data-part="content">
<h2 data-part="title">Dialog</h2>
<span data-part="description">Welcome to Turboprop!</span>
<button data-part="close-trigger">Close</button>
</div>
</div>
</div>