1.0.1 • Published 4 years ago
Dialogs
Dialogs inform users about a task or action they need to take.
HTML
Make sure to put this as high in your <body> element as possible.
<div class="mdf-dialog-container" aria-hidden="true">
<div class="mdf-dialog" role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
<div class="mdf-dialog__header">
<h2 id="dialog-title" class="mdf-dialog__title">Dialog title</h2>
<button class="mdf-dialog__close" aria-label="Close dialog">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#clear"></use>
</svg>
</button>
</div>
<div class="mdf-dialog__content">
<p id="dialog-desc">Dialog description further explaining the actions.</p>
</div>
<div class="mdf-dialog__actions">
<button class="mdf-button" data-dialog-action="cancel">Cancel</button>
<button class="mdf-button" data-dialog-action="confirm">Confirm</button>
</div>
</div>
<div class="mdf-dialog-backdrop"></div>
</div>
Sass
// Include default styles without configuration
@forward '@miraidesigns/dialog/styles';
// Configure appearance
@use '@miraidesigns/dialog' with (
$variable: value
);
@include dialog.styles();
TypeScript
import { MDFDialog } from '@miraidesigns/dialog';
const dialog = new MDFDialog(document.querySelector('.mdf-dialog'));
dialog.openDialog();
Implementation
Attributes
Please see the WAI-ARIA page for attributes and best practices regarding dialogs.
| Name | Element | Description |
|---|
data-dialog-action="cancel" | <button> | Will execute the onCancel function when this button is clicked |
data-dialog-action="confirm" | <button> | Will execute the onConfirm function when this button is clicked |
Classes
| Name | Type | Description |
|---|
mdf-dialog-container | Parent | Contains the dialog element. Creates the backdrop and centers the dialog |
mdf-dialog--active | Modifier | 1. Prepares the dialog to be visible |
mdf-dialog--fade-in | Modifier | 2. Fades-in the dialog and allows for interaction |
mdf-dialog | Parent / Child | Contains the dialog elements. Child to .mdf-dialog-container |
mdf-dialog__header | Parent / Child | Contains the dialog title. Child to .mdf-dialog |
mdf-dialog__close | Child | Closes the dialog. Child to .mdf-dialog__header |
mdf-dialog__title | Child | Title element. Child to .mdf-dialog__header |
mdf-dialog__content | Parent / Child | Contains the text description or other kinds of content. Child to .mdf-dialog |
mdf-dialog__actions | Parent / Child | Contains the user actions. Child to .mdf-dialog |
mdf-dialog-backdrop | Child | Dialog backdrop. Child to .mdf-dialog-container |
Events
| Name | Data | Description |
|---|
MDFDialog:opened | null | Fires when the dialog opens |
MDFDialog:closed | null | Fires when the dialog closes |
Properties
| Name | Type | Description |
|---|
.container | (): HTMLElement | Returns the dialog container element |
.dialog | (): HTMLElement | Returns the dialog element |
.content | (): HTMLElement | Returns the content element |
.text | (): HTMLParagraphElement | Returns the text element |
.openDialog(message?, setFocus?) | (string, boolean): void | Open the dialog window (set displayed message, set focus on first item) |
.closeDialog(confirmed?) | (boolean): void | Close the dialog window (run confirm or cancel callback) |
Options
| Name | Type | Default | Description |
|---|
onOpen | () => void | null | Function will run when the dialog is opened |
onConfirm | () => void | null | Function will run when the dialog window is confirmed |
onCancel | () => void | null | Function will run when the dialog window is closed or cancelled |
hideOnClick | boolean | true | Dialog will be hidden when clicked outside of it's content |