This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
525 B
27 lines
525 B
2 years ago
|
<script>
|
||
|
|
import { fade } from "svelte/transition";
|
||
|
|
|
||
|
|
export let toasts = [];
|
||
|
|
export let fade_after = 5000;
|
||
|
|
|
||
|
|
export const send_toast = (msg) => {
|
||
|
|
toasts.push(msg);
|
||
|
|
toasts = toasts;
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
toasts.shift();
|
||
|
|
toasts = toasts;
|
||
|
|
}, fade_after);
|
||
|
|
}
|
||
|
|
|
||
|
|
export let orientation = "bottom left";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<toast-list class="{ orientation }" class:active={ toasts.length > 0 }>
|
||
|
|
{#each toasts as toast}
|
||
|
|
<toast transition:fade|local>
|
||
|
|
{ toast }
|
||
|
|
</toast>
|
||
|
|
{/each}
|
||
|
|
</toast-list>
|