This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
 
 
 
 
bandolier-template/admin/bando/demos/Toast.svelte

35 lines
1.1 KiB

<script>
import Icon from "$/client/components/Icon.svelte";
import { fade } from "svelte/transition";
let bottom=true;
let top=false;
let right=true;
let left=false;
let active=true;
let reverse = false;
let toasts = ["Toast 1"];
const add_toast = () => {
toasts.push(`Toast ${toasts.length + 1}`);
toasts = toasts;
}
</script>
<span on:click={ add_toast}><Icon name="plus" size="48" /></span>
<span on:click={ () => left = !left }><Icon name="arrow-left" size="48" inactive={!left} /></span>
<span on:click={ () => right = !right }><Icon name="arrow-right" size="48" inactive={!right} /></span>
<span on:click={ () => bottom = !bottom }><Icon name="arrow-down" size="48" inactive={!bottom}/></span>
<span on:click={ () => top = !top }><Icon name="arrow-up" size="48" inactive={!top}/></span>
<span on:click={ () => reverse = !reverse }><Icon name={ reverse ? "chevrons-up" : "chevrons-down" } size="48" /></span>
<toast-list class:bottom class:top
class:left class:right class:active class:reverse>
{#each toasts as toast}
<toast transition:fade|local>
<span>{ toast }</span>
</toast>
{/each}
</toast-list>