logo x-n ui

$nui

$el is a magical property that has multiple useful methods for some components.

open(dialogModalID:string)

Allows you to open/show the dialog or component drawer from other components.

close(dialogModalID:string)

Allows you to close/hide the dialog or component drawer from other components.

toggle(dialogModalID:string)

Allows you to open/show-close/hide the dialog or component drawer from other components.

Examples 

<!-- dialog -->
<button x-on:click="$nui.open('my-dialog')">Open dialog from outside</button>
<div x-dialog x-nui:id="my-dialog">
    <div x-dialog:backdrop></div>
    <div x-dialog:panel>Panel content</div>
</div>
<!-- drawer -->
<button x-on:click="$nui.open('my-drawer')">Open drawer from outside</button>
<div x-drawer x-nui:id="my-drawer">
    <div x-drawer:backdrop></div>
    <div x-drawer:panel>Panel content</div>
</div>