A fully-managed, renderless dialog component jam-packed with accessibility and keyboard features, perfect for building completely custom modal and dialog windows for your next application.
Dialogs are built using the
x-drawer,
x-drawer:panel,
x-drawer:toggle and
x-drawer:backdrop components.
Focus will be moved inside the dialog and trapped there as the
user cycles through the focusable elements.
<div x-drawer>
<div x-drawer:backdrop></div>
<div x-drawer:panel></div>
</div>
Options can be passed as a block or individually using the
x-nui
directive.
Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.
In block
<div x-nui="{expose:'data'}"></div>Individually
<div x-nui:expose="data"></div>| name | type | default | description |
|---|---|---|---|
id
|
string |
|
Defines an identifier (ID) which must be unique in the
whole document. Required if you were to open it using
magic $nui.
|
open
|
boolean |
false
|
It specifies that the dialog should be visible (open) to the user. |
keyboard
|
boolean |
true
|
Closes the modal when escape key is pressed. |
focus
|
boolean |
true
|
Puts the focus on the modal when initialized. |
autofocus
|
boolean |
true
|
Establishes that when initializing it must force the focus to the first element that has autofocus as an html attribute. |
backdrop
|
string |
|
Specify static for a backdrop
which doesn’t close the modal when clicked.
|
expose
|
null,string |
null
|
Exposes the component api.
Receives the name of the variable where the component
api will be exposed
|
The component API is an
object
that contains the following properties:
| name | type | description |
|---|---|---|
main
|
element |
Element where it is found:
x-drawer
|
show
|
boolean | Currently open panel element |
id
|
null,element | The Identifier (ID) of the dialog. |
CSS classes that are added to describe a state.
| name | description |
|---|---|
show
|
Set to x-drawer:backdrop and
x-drawer:panel when is visible.
|