Enhancement
Toast
Show a toast when a trigger is clicked
- Import
@parallelogram-js/core/components/Toast- Selector
[data-toast-trigger][data-toast-message]
Playground
Toast types
<div class="button-row">
<button type="button" data-toast-trigger="success" data-toast-message="Table booked for 7pm" data-toast-title="Booked">Book</button>
<button type="button" data-toast-trigger="info" data-toast-message="We open at 7am tomorrow">Opening hours</button>
<button type="button" data-toast-trigger="error" data-toast-message="That time is no longer available">Unavailable</button>
</div>Use the example to see the events it sends.
About
A small bridge from markup to AlertManager. Clicking a trigger shows its message through the page's <p-toasts>, which AlertManager creates when the page has none. The attributes are read on each click, so a page can change the message before it is shown.
Usage
Register the component and the framework loads it the first time a page contains [data-toast-trigger][data-toast-message].
import { Parallelogram } from '@parallelogram-js/core';
const app = Parallelogram.create();
app.components.add('[data-toast-trigger][data-toast-message]', () => import('@parallelogram-js/core/components/Toast'));
app.run();The framework is optional. Toast.enhanceAll() mounts the component on every matching element by itself, for a page that wants one enhancement rather than a framework:
import Toast from '@parallelogram-js/core/components/Toast';
Toast.enhanceAll();It takes a selector and the component's options, and returns the instance it mounted them with. What it leaves out is what the framework adds: loading a component only on the pages that use it, mounting again after a page swap, and ordering with dependsOn.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
data-toast-trigger | info | success | warning | error | warn | danger | info | The toast type; warn and danger are aliases For every instance, Toast.defaults.defaultType. |
data-toast-messagerequired | string | none | The message |
data-toast-title | string | none | A title above the message |
data-toast-duration | number | none | Milliseconds before the toast closes, or 0 to keep it; 4000 by default, and error toasts stay until dismissed |
data-toast-dismissible | boolean | true | Show a dismiss button |
Events
| Name | Detail | Description |
|---|---|---|
toast:shown | { message: string; type: string; title: string; duration: number; dismissible: boolean; timestamp: number } | Dispatched on the trigger when its toast is shown DOM event and event bus |
toast:mount | { element: HTMLElement; message: string | null; type: string; timestamp: number } | A trigger was set up Event bus |