Dialog

The Dialog component provides a modal overlay for displaying content that requires user attention.

Installation

npm install @duskmoon-dev/el-dialog

Usage

import '@duskmoon-dev/el-dialog/register';

<el-dm-dialog id="my-dialog">
  <span slot="header">Dialog Title</span>
  <p>Dialog content goes here.</p>
  <div slot="footer">
    <el-dm-button variant="ghost" onclick="document.querySelector('#my-dialog').close()">Cancel</el-dm-button>
    <el-dm-button variant="primary">Confirm</el-dm-button>
  </div>
</el-dm-dialog>

<el-dm-button onclick="document.querySelector('#my-dialog').show()">Open Dialog</el-dm-button>

Live Demo

Dialog Demo

Open Dialog

Example Dialog

This is an example dialog. You can put any content here.

Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the dialog is visible
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Dialog size
`dismissible`	`boolean`	`true`	Allow closing via backdrop click or Escape
`no-backdrop`	`boolean`	`false`	Hide the backdrop overlay

Methods

Method	Description
`show()`	Opens the dialog
`close()`	Closes the dialog
`toggle()`	Toggles the dialog state

Sizes

<el-dm-dialog size="sm">Small dialog</el-dm-dialog>
<el-dm-dialog size="md">Medium dialog</el-dm-dialog>
<el-dm-dialog size="lg">Large dialog</el-dm-dialog>
<el-dm-dialog size="xl">Extra large dialog</el-dm-dialog>
<el-dm-dialog size="full">Fullscreen dialog</el-dm-dialog>

Slots

Slot	Description
default	Main dialog content
`header`	Dialog header/title
`footer`	Dialog footer/actions

Events

Event	Description
`open`	Fired when dialog opens
`close`	Fired when dialog closes

Event Handling

const dialog = document.querySelector('el-dm-dialog');
dialog.addEventListener('open', () => {
  console.log('Dialog opened');
});
dialog.addEventListener('close', () => {
  console.log('Dialog closed');
});

CSS Parts

Part	Description
`dialog`	The dialog container
`backdrop`	The backdrop overlay
`header`	The header section
`body`	The body section
`footer`	The footer section
`close`	The close button

Accessibility

Uses role="dialog" and aria-modal="true"
Escape key closes dismissible dialogs
Focus is trapped within the dialog when open
Body scroll is disabled when dialog is open