@miraidesigns/dialog

v1.0.1

Published

2 years ago

Mirai Designs Framework: Dialog module

Downloads

0High
0Medium
0Low

miraidesigns

mirai designs framework dialog

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 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme