@miraidesigns/alert
v1.0.0
Published
Mirai Designs Framework: Alert module
Downloads
19
Maintainers
miraidesignsReadme
Alerts
Alerts display an important message to the user fixed to the top of the screen.
HTML
Make sure to put this as high in your <body> element as possible.
<div id="alert" class="mdf-alert" role="alert">
<div class="mdf-alert__content">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#error"></use>
</svg>
<span class="mdf-alert__text">This is an alert message</span>
</div>
<div class="mdf-alert__actions">
<button class="mdf-button" data-alert-action="cancel">Dismiss</button>
<button class="mdf-button" data-alert-action="confirm">Confirm</button>
</div>
</div>Sass
// Include default styles without configuration
@forward '@miraidesigns/alert/styles';// Configure appearance
@use '@miraidesigns/alert' with (
$variable: value
);
@include alert.styles();TypeScript
import { MDFAlert } from '@miraidesigns/alert';
const alert = new MDFAlert(document.querySelector('.mdf-alert'));
alert.showAlert();Implementation
Attributes
| Name | Element | Description |
| ----------------------------- | ---------- | ----------------------------------------------------------------- |
| data-alert-action="cancel" | <button> | Will execute the onCancel function when this button is clicked |
| data-alert-action="confirm" | <button> | Will execute the onConfirm function when this button is clicked |
Classes
| Name | Type | Description |
| -------------------- | -------------- | ---------------------------------------------------------- |
| mdf-alert | Parent | Alert element |
| mdf-alert--active | Modifier | 1. Prepares the alert to be visible |
| mdf-alert--move-in | Modifier | 2. Moves the alert on screen and allows for interaction |
| mdf-alert--filled | Modifier | Fills the alert's background with the set brand color |
| mdf-alert--warning | Modifier | Fills the alert's background with the set warning color |
| mdf-alert--error | Modifier | Fills the alert's background with the set error color |
| mdf-alert__content | Parent / Child | Contains the alert text and actions. Child to .mdf-alert |
| mdf-alert__text | Child | Alert text. Child to .mdf-alert__content |
| mdf-alert__actions | Child | Alert action buttons. Child to .mdf-alert__content |
Events
| Name | Data | Description |
| ----------------- | ------ | ------------------------------------ |
| MDFAlert:opened | null | Fires once the alert has been opened |
| MDFAlert:closed | null | Fires once the alert has been closed |
Properties
| Name | Type | Description |
| -------------------- | ----------------- | --------------------------------------- |
| .alert | HTMLElement | Returns the alert element |
| .message | string | Get or set the alert's text message |
| .showAlert(delay?) | (number): void | Show the alert, optionally with a delay |
Options
| Name | Type | Default | Description |
| ----------- | ------------ | ------- | --------------------------------------------- |
| onOpen | () => void | null | Function will run when the alert is opened |
| onConfirm | () => void | null | Function will run when the alert is confirmed |
| onCancel | () => void | null | Function will run when the alert is dismissed |