Dialog.md

Dialog

The Dialog component is a flexible and extensible content container overlay on either the primary window or another dialog. It is based on the HTML <dialog> element and can be used to create both modal and non-modal dialog boxes. Modal dialog boxes interrupt interaction with the rest of the page being inert, while non-modal dialog boxes allow interaction with the rest of the page. Inert content outside an active dialog box is usually visually obscured or dimmed, making it difficult to discern. By default, modal overlays contain their own tab sequence, preventing users from navigating outside the component. The component implements the W3C ARIA APG Dialog (Modal) Pattern as well as the W3C ARIA APG Alert and Message Dialogs Pattern.

Examples

Dialog Component

Dialog is a container to display content in an overlay window.

<o-dialog></o-dialog>

Props

Prop name	Description	Type	Values	Default
active	Whether dialog is active or not, use v-model:active to make it two-way binding	boolean	-	false
alert	This enables the alertdialog role, allowing assistive technologies and browsers to distinguish alert dialogs from other dialogs. Alert dialogs interrupt the user's workflow to communicate an important messages and acquire an explicit response. Examples include error messages that require confirmation and other action confirmation prompts.	boolean	-
animation	Custom animation (transition name)	string	-	From config: dialog: {   animation: "zoom-out" }
ariaCloseLabel	Accessibility label for the close button	string	-	From config: dialog: {   ariaCloseLabel: "Close" }
ariaDescribedby	Accessibility aria-describedby to be passed to the div root element - if a title is set, it is linked to the title	string	-
ariaLabel	Accessibility aria-label to be passed to the div root element	string	-
backdrop	Show an backdrop overlay background; make it a modal dialog	boolean	-	From config: dialog: {   backdrop: true }
blockScroll	Whether background scrollbar should be blocked/removed when dialog is visible	boolean	-	From config: dialog: {   blockScroll: true }
buttonPosition	Position of the footer buttons	"center" | "left" | "right"	-
cancelButton	Render a cancel button and set text text as label	string	-
cancelVariant	Color variant of the cancel button	string	primary, info, success, warning, danger, and any other custom color
closeIcon	Close icon name	string	-	From config: dialog: {   closeIcon: "close" }
closeIconSize	Close icon size	string	-	From config: dialog: {   closeIconSize: undefined }
closeOnBackdrop	Close the dialog when clicked outside of the panel	boolean	-	From config: dialog: {   closeOnBackdrop: true }
closeOnConfirm	Close the dialog when the confirm button is preset	boolean	-	From config: dialog: {   closeOnConfirm: false }
closeOnEscape	Close the dialog when pressing escape key	boolean	-	From config: dialog: {   closeOnEscape: true }
closeable	Adds close button to the header to hide the dialog	boolean	-	From config: dialog: {   closeable: false }
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	C	-
confirmButton	Render a confirm button and set text as label	string	-
confirmVariant	Color variant of the confirm button	string	primary, info, success, warning, danger, and any other custom color
content	Dialog body content, unnecessary when content slot is used	string	-
disableCancel	Disable the cancel button	boolean	-
disableConfirm	Disable the confirm button	boolean	-
events	Events to be binded to the injected component	EmitsToProps<ComponentEmit<C>>	-
fullscreen	Display dialog as full screen	boolean	-	false
iconPack	Icon pack to use for the close icon	string	mdi, fa, fas and any other custom icon pack	From config: dialog: {   iconPack: undefined }
imageAlt	Dialog image alt, unnecessary when image slot is used	string	-
imageSrc	Dialog image src, unnecessary when image slot is used	string	-
loading	Show a loading spinner in the dialog	boolean	-
loadingLabel	Show label beside the loading icon	string	-
maxHeight	Max height of the dialog	Numberish	-	From config: dialog: {   maxHeight: "80vh" }
maxWidth	Max width of the dialog	Numberish	-	From config: dialog: {   maxWidth: "80vw" }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: dialog: {   mobileBreakpoint: undefined }
override	Override existing theme classes completely	boolean	-
props	Props to be binded to the injected component	ComponentProps<C>	-
subtitle	Dialog header subtitle, unnecessary when subtitle slot is used	string	-
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean | object | string	-	From config: dialog: {   teleport: false }
textPosition	Text alignment in its entirely	"center" | "left" | "right"	-
title	Dialog header title, unnecessary when title slot is used	string	-

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	event Event - native event	the event is fired when the dialog has been closed
cancel	event Event - native event	the event is fired when the user wish to dismiss the current open dialog
confirm	event Event - native event	the event is fired when the confirm button get clicked

Slots

Name	Description	Bindings
header	Override the header	close (event: Event): void - function to emit a close event
title	Override the header title, default is title prop
subtitle	Override the header subtitle, default is subtitle prop
close	Define a custom close icon
image	Override the image element
default	Override the default dialog body	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
content	Override the body content, default is content prop	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
footer	Override the footer	close (event: Event): void - function to emit a close event confirm (event: Event): void - function to emit a confirm event
cancelButton	Define the cancel button label
confirmButton	Define the confirm button label

Class Inspector

Sass Variables

Current theme ➜ Oruga

SASS Variable	Default
$dialog-spacer	calc(2 * h.useVar("control-spacer"))
$dialog-zindex	map.get(vars.$zindex, "fixed")
$dialog-box-shadow	h.useVar("overlay-box-shadow")
$dialog-background-color	h.useVar("control-background-color")
$dialog-border-width	h.useVar("control-border-width")
$dialog-border-style	solid
$dialog-border-color	h.useVar("control-border-color")
$dialog-border-radius	h.useVar("border-radius")
$dialog-backdrop-background-color	h.useVar( "overlay-background-color")
$dialog-header-padding	$dialog-spacer
$dialog-header-background-color	inherit
$dialog-body-padding	$dialog-spacer
$dialog-body-background-color	inherit
$dialog-footer-padding	$dialog-spacer
$dialog-footer-background-color	inherit
$dialog-title-color	h.useVar("font-color")
$dialog-title-font-size	2em
$dialog-title-font-weight	bold
$dialog-subtitle-color	h.useVar("font-color")
$dialog-subtitle-font-size	1.5em
$dialog-subtitle-font-weight	normal
$dialog-content-color	h.useVar("font-color")
$dialog-content-font-size	h.useVar("font-size")
$dialog-content-font-weight	h.useVar("font-weight")
$dialog-close-top	$dialog-spacer
$dialog-close-right	$dialog-spacer
$dialog-close-color	h.useVar("black")
$dialog-close-size	2rem
$dialog-close-border-radius	h.useVar("border-radius-rounded")
$dialog-close-background-color	inherit

See ➜ 📄 SCSS file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default

See ➜ 📄 SCSS file