@ulmandigital/toast v0.0.2

A toasty solution for communicating with your users

import Toast from '@ulmandigital/toast.svelte';

<Toast {toasted} {toastMessage} timeout={3000} position="toast-top" />

toasted — set to true to trigger the toast

let toasted = true;

toastMessage — the text content for your toast

HTML may be inlined!

let toastMessage = (() => {
	if (a condition) return 'Your message here';
	else return '<p>An alternate message here<p>';
})();

timeout — how long the toast will appear on screen

In miliseconds; defaults to 3000.

position — where the toast will appear

Currently, position can be set to toast-top or toast-bottom to have it appear from the top or bottom of the screen, respectively. Defaults to toast-top.

Styling

Access toast styles from .toast in a global css context. Positioning styles are handled by component-scoped css within the package, but everything else is fair game.

.toast {
	padding: 2rem;
	text-align: center;
	background: #000;
	transition: transform 300ms; // Animate the slide-in/out
}