Dialog
The EDialog component presents focused modal content above the application, coordinates its overlay and stacking order, locks background scroll, and manages keyboard focus. Compose its default slot with cards, forms, or task-specific content while v-model remains the source of truth for visibility.
Usage
Open and close the dialog through v-model, then configure the common panel and focus props. The activator belongs to the calling view, so its click handler updates the same controlled state.
Dismissal and persistence
A standard dialog closes through an explicit action, Escape, or outside interaction. Enable persistent when the user must complete or deliberately cancel a decision; rejected dismissal plays feedback instead of changing the model.
Sizing and surface
Constrain focused tasks with maxWidth, use fluid for the available width, and apply a framework elevation to the panel. Long content scrolls inside the dialog while the overlay keeps the document locked.
Fullscreen dialogs
Use fullscreen for immersive or space-intensive tasks. It removes panel margins and radius, fills the viewport, and takes precedence over maxWidth.
Composition patterns
The default slot accepts any task-specific structure. Keep the title, supporting content, and actions in a clear order; forms should expose a primary submission action and a distinct way to cancel or close.
Focus and accessibility
The container exposes dialog semantics, traps Tab within the active panel, focuses the dialog on open, and restores the previous focus on close. Provide a visible title and an explicit exit, especially when persistent is enabled.
After closing, focus returns to the button that opened the dialog.
API reference
Reference the verified public props for EDialog. Its event, default slot, and exposed close method are summarized after the table.
EDialog props
| Property | Type | Default |
|---|---|---|
| modelValue | boolean | false |
Controlled open state synchronized through update:modelValue. | ||
| persistent | boolean | false |
Prevents Escape and outside interaction from closing the dialog and plays rejection feedback instead. | ||
| maxWidth | string | number | undefined |
Constrains the panel width when the dialog is not fullscreen. Numeric values are normalized to pixels. | ||
| fluid | boolean | false |
Expands the dialog panel to the available width while preserving its viewport margins. | ||
| fullscreen | boolean | false |
Makes the panel occupy the full viewport and ignores maxWidth. | ||
| absolute | boolean | false |
Positions the dialog content container absolutely instead of fixing it to the viewport. | ||
| autoFocus | boolean | true |
Moves focus into the active dialog when it opens. | ||
| restoreFocus | boolean | true |
Returns focus to the previously focused element when the dialog closes. | ||
| elevation | Elevation | undefined |
Applies a framework elevation class to the dialog panel. | ||
Event, slot, and exposed method
EDialog emits update:modelValue, renders content through its default slot, and exposes close(force?). Calling close() respects persistent; close(true) forces dismissal.