Toasts

Utility

Simple notifications utilizing a dynamic queue system.

@brainandbones/skeleton
View Source
Doc Source

Examples

Usage

For the best results, add the following to your app's root component to make toasts available in global scope.

html 
<Toast background="bg-accent-500" position="tr" variant="filled" duration={250} />

Create a Toast Message

Config the toast message object to your preference.

typescript 
const toastMessage: ToastMessage = {
    message: 'Your Message Here',
    // Optional:
    autohide: true, 
    timeout: 5000,
    button: { label: 'Greeting', action: () => { alert('Hello, Skeleton'); }}
};

Toast Queue

Use the Toast store to manipulate the toast queue using the following methods.

javascript 
import { toastStore } from '@brainandbones/skeleton';

// Trigger a toast
toastStore.trigger(toastMessage);

// Close the foremost open toast.
toastStore.close();

// Clear all toasts from the queue.
toastStore.clear();

Debugging

Log the Queue

Use the following to monitor the queue in your console as it updates. Note that Svelte store contents are only visible for the current logged line.

javascript 
toastStore.subscribe(() => { console.log($toastStore); });

Visualize the Queue

Use the following to display the queue in your UI.

html 
<pre>queue: {JSON.stringify($toastStore, null, 2)}</pre>

Accessibility

Meets the ARIA Guidelines.