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.
20 lines
909 B
20 lines
909 B
2 years ago
|
<script>
|
||
|
|
import Icon from "$/client/components/Icon.svelte";
|
||
|
|
import Toasts from "$/client/components/Toasts.svelte";
|
||
|
|
|
||
|
|
let orientation="bottom right";
|
||
|
|
let toasts = [];
|
||
|
|
let send_toast;
|
||
|
|
let fade_after = 5000;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<span on:click={ () => send_toast(`New Toast ${ toasts.length }`) }><Icon name="plus" size="48" /></span>
|
||
|
|
<span on:click={ () => orientation = "bottom left" }><Icon name="arrow-down-left" size="48" /></span>
|
||
|
|
<span on:click={ () => orientation = "bottom right" }><Icon name="arrow-down-right" size="48" /></span>
|
||
|
|
<span on:click={ () => orientation = "top left" }><Icon name="arrow-up-left" size="48" /></span>
|
||
|
|
<span on:click={ () => orientation = "top right" }><Icon name="arrow-up-right" size="48" /></span>
|
||
|
|
|
||
|
|
<input name="fade" placeholder="Fade Time (ms)" bind:value={ fade_after }>
|
||
|
|
|
||
|
|
<Toasts bind:toasts bind:send_toast orientation={ orientation } fade_after={ fade_after } />
|