@miraidesigns/snackbar
v1.0.0
Published
Mirai Designs Framework: Snackbar module
Downloads
3
Maintainers
miraidesignsReadme
Snackbars
Snackbars show a quick message at the bottom of the screen.
HTML
Make sure to put this as high in your <body> element as possible.
<div class="mdf-snackbar" role="status" aria-live="polite">
<span class="mdf-snackbar__text">This is a preview text message</span>
<div class="mdf-snackbar__actions">
<button class="mdf-button" data-snackbar-action="action">Action</button>
<button class="mdf-snackbar__close" data-snackbar-action="close" aria-label="Dismiss snackbar">
<svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
<use href="icons.svg#clear"></use>
</svg>
</button>
</div>
</div>Sass
// Include default styles without configuration
@forward '@miraidesigns/snackbar/styles';// Configure appearance
@use '@miraidesigns/snackbar' with (
$variable: value
);
@include snackbar.styles();TypeScript
import { MDFSnackbar } from '@miraidesigns/snackbar';
const snackbar = new MDFSnackbar(document.querySelector('.mdf-snackbar'));
snackbar.showSnackbar();Implementation
Attributes
Please see the WAI-ARIA page for attributes and best practices regarding status messages.
| Name | Element | Description |
| ------------------------------- | ---------- | ---------------------------------------------------------------- |
| data-snackbar-action="action" | <button> | Will execute the onAction function when this button is clicked |
| data-snackbar-action="close" | <button> | Will execute the onClose function when this button is clicked |
Classes
| Name | Type | Description |
| ----------------------- | -------------- | --------------------------------------------------------------- |
| mdf-snackbar | Parent | Contains the snackbar elements |
| mdf-snackbar--active | Modifier | Fades-in and moves the snackbar on-screen |
| mdf-snackbar__text | Child | Holds the snackbar text message. Child to .mdf-snackbar |
| mdf-snackbar__actions | Parent / Child | Holds the action and close button. Child to .mdf-snackbar |
| mdf-snackbar__action | Child | Executes the supplied action. Child to .mdf-snackbar__actions |
| mdf-snackbar__close | Child | Dismisses the snackbar. Child to .mdf-snackbar__actions |
Events
| Name | Data | Description |
| -------------------- | ------ | ------------------------------ |
| MDFSnackbar:opened | null | Fires when the snackbar opens |
| MDFSnackbar:closed | null | Fires when the snackbar closes |
Properties
| Name | Type | Description |
| ------------------------- | ---------------- | ---------------------------------------------------- |
| .message | string | Get or set the snackbar text message |
| .snackbar | HTMLElement | Returns the snackbar element |
| .isActive() | (): boolean | Returns wether or not the sidebar is active |
| .snowSnackbar(message?) | (string): void | Show the snackbar, optionally with the given message |
Options
| Name | Type | Default | Description |
| ----------- | ------------ | ------- | -------------------------------------------------------------------------- |
| delay | number | 5000 | The amount of time that has to pass before the snackbar disappears (in ms) |
| onOpen | () => void | null | Function will run when the snackbar is opened |
| onAction | () => void | null | Function will run when the action button is activated |
| onClose | () => void | null | Function will run when the snackbar is closed by the user |
| hideOnESC | boolean | true | Hide the snackbar when the ESC key is pressed |