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.
36 lines
1.1 KiB
36 lines
1.1 KiB
2 years ago
|
<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>
|